AA
AA (recommended minimum)
This is the level required by most accessibility regulations, including the European Accessibility Act.
- Normal text4.5:1
- Large text / UI3:1
Contrast Checker
Test the contrast ratio between foreground and background colors to ensure accessibility.
Contrast
000000 / E65817
AA · 5.77:1
Aa
Preview Title
The quick brown fox jumps over the lazy dog
small text example (12px)
Text Color 000000Background Color E65817
WCAG Standards
AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
ElementAAAAANormal textLarge textUI element
What contrast ratio is and why it matters
The contrast ratio measures the difference in luminance between two colors, usually text and its background. The higher the number, the easier it is to tell text apart from the background. The Web Content Accessibility Guidelines (WCAG), the international reference standard, set minimum ratios based on text size and the conformance level you want to meet.
Insufficient contrast is not just an aesthetic issue: it makes reading harder for people with low vision, color-perception deficiencies, or anyone using a phone in bright sunlight. Meeting WCAG is also a legal requirement in many countries under digital accessibility regulations.
AA and AAA levels, explained
AAA
AAA (enhanced level)
Recommended for critical content or audiences with higher accessibility needs, but not always required across an entire site.
- Normal text7:1
- Large text4.5:1
How to use the tool
Enter your text color and background color in Hex, RGB, HSL or OKLCH. The tool calculates the contrast ratio instantly and shows whether the combination passes or fails each level (AA and AAA) for small text, large text and UI elements such as buttons or icons. If your combination fails, try darkening or lightening one of the two colors until you clear the required threshold.
This check is also built into the color picker and the color wheel, so you can verify contrast without leaving your workflow while choosing a palette.
Frequently asked questions
For normal text, a ratio of at least 4.5:1 meets WCAG level AA, the recommended minimum standard. For enhanced contrast (level AAA), you need a ratio of 7:1.
AA is the minimum level required by most accessibility regulations. AAA is a stricter enhanced level, recommended for critical content but not always mandatory across an entire site.
Because the size and weight of large letters already make them easier to read, so WCAG allows a lower ratio (3:1 at AA) versus the 4.5:1 required for normal text.
In many countries yes, especially for public administrations and, increasingly, for private companies under rules like the European Accessibility Act. Even when it is not legally required, meeting WCAG improves the experience for all of your users.
It is calculated from the relative luminance of both colors, a measure of how much light they reflect, and expressed as a ratio between 1:1 (no contrast, same color) and 21:1 (the maximum, pure white on pure black).
Try darkening the text color or lightening the background, or the other way around, until you exceed the required ratio. You can use the shade and tone variations in the color picker to find a version of the same color that passes.