WCAG Contrast Checker
Check the contrast between a text color and its background color: contrast ratio, WCAG levels AA and AAA for text and interface components, and close compliant colors.
100% local processing — nothing leaves your browser.Learn more
Color not recognized. Examples: #1E40AF, rgb(30, 64, 175), hsl(224, 71%, 40%), navy
Color not recognized. Examples: #1E40AF, rgb(30, 64, 175), hsl(224, 71%, 40%), navy
Contrast ratio
Preview
Normal text (16 px): the quick brown fox jumps over the lazy dog.
Large text (24 px)
Large bold text (19 px)
Border of a field or a button| Criterion | Minimum | Result |
|---|---|---|
| Normal text, level AA (WCAG 1.4.3) | 4.5:1 | |
| Normal text, level AAA (WCAG 1.4.6) | 7:1 | |
| Large text, level AA (WCAG 1.4.3) | 3:1 | |
| Large text, level AAA (WCAG 1.4.6) | 4.5:1 | |
| User interface components and graphics (WCAG 1.4.11) | 3:1 |
Large text: at least 24 px (18 pt), or 18.66 px (14 pt) bold.
- Text:
- Background:
No close color gets there: change one of the two colors more boldly.
Go further
Have your site's accessibility checked
Contrast, keyboard navigation, text alternatives: talk to StudioMaestro, the web studio of Youtilz's publisher. The first 30-minute call is free.
Book a call with StudioMaestro (opens in a new tab)Service in French.
Does Your Text Have Enough Contrast?
Light gray text on a white background looks elegant on a well-adjusted screen, but becomes unreadable in sunlight, on a low-end screen or for a person with low vision. The contrast checker calculates the ratio between the text color and the background color, and shows which accessibility levels are reached.
If the contrast is insufficient, the tool suggests the closest colors that pass: the same hue, just darker or lighter.
How to Use
- Choose the text color and the background color, with the color picker or by typing a code (
#1E40AF,rgb(30, 64, 175),hsl(224, 71%, 40%)or a CSS color name) - Read the ratio and the result for each criterion
- Check the preview in normal text, in large text and on a border
- If needed, click "Apply" to use a suggested color
Thresholds to Know
Normal Text: 4.5:1
WCAG level AA (success criterion 1.4.3), also adopted in criterion 3.2 of the RGAA, the French accessibility standard. This is the level required by regulations.
Large Text: 3:1
For text of at least 24 px (18 pt), or 18.66 px (14 pt) in bold: large characters remain readable with less contrast.
User Interface Components: 3:1
Field borders, icons, focus states and graphics that convey information (WCAG 1.4.11, RGAA 3.3).
Enhanced Level AAA: 7:1
4.5:1 for large text (WCAG 1.4.6). It is generally not required, but it helps people whose eyesight is declining.
Decorative text, logos and disabled elements are not subject to these thresholds.
How the Ratio Is Calculated
Each color gets a relative luminance, from 0 for black to 1 for white. Green carries the most weight (71.5%) and blue the least (7.2%), as in human vision. The ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color: it ranges from 1:1 (two identical colors) to 21:1 (black on white).
The ratio shown is truncated, never rounded up: a contrast of 4.499:1 is shown as 4.49:1 and fails level AA, since WCAG does not allow rounding up to reach a threshold.
Who Is Affected?
In France, the RGAA applies to public websites and large companies. Since June 28, 2025, the European Accessibility Act has extended accessibility obligations to many services sold online to consumers, such as e-commerce or banking. Microenterprises that provide services are exempt.
Even without an obligation, good contrast benefits everyone: reading outdoors, aging screens, readers in a hurry.
Limitations
- Semi-transparent colors are not taken into account: enter the final color, as it appears on its background.
- Text placed over an image or a gradient must be checked on the area with the least contrast.
- Contrast is only one criterion among others: text size, spacing and structure also matter.