Accessibility Checker
Check the accessibility of your colors
This tool helps you ensure your color choices meet WCAG accessibility standards. Follow these steps:
- Use the top color picker to select your foreground (text) color.
- Use the bottom color picker to choose your background color.
- The results table will update automatically, showing you important accessibility metrics.
- Use the flip button (↑↓) to quickly swap foreground and background colors.
Understanding the Results
| Level | Description |
|---|---|
| AAA | Highest level of accessibility |
| AA | Good accessibility |
| A | Poor accessibility |
| Fail | Does not meet minimum standards |
| Poor | ...What are you doing? |
Aim for at least AA compliance for body text, and AAA for larger headings and important content.
Use the text preview below the results to see how your color combination looks with various font sizes and styles. This can help you make informed decisions about readability across different contexts in your design.
| Metric | Value |
|---|---|
| Luminance (Color 1) | - |
| Luminance (Color 2) | - |
| Contrast Ratio | - |
| WCAG Compliance (Normal Text) | - |
| WCAG Compliance (Large Text) | - |
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog