OdeetHomeContrast checker
Check whether two colours meet the WCAG and RGAA thresholds.
Contrast ratio : 3.45:1
Not enough for body text
Ratio 3.45:1. Not enough for body text.
| Use | AA | AAA |
|---|---|---|
| Body text | Fail: 4.5 required | Fail: 7 required |
| Large text (24 px, or 18.5 px bold) | Pass: 3 required | Fail: 4.5 required |
| Borders, icons, form fields | Pass: 3 required | — |
Closest that passes: #767676 for body text, #595959 for AAA
Frequently asked questions
- Which ratio do I need?
- At level AA, required by the European Accessibility Act and the French RGAA: 4.5:1 for body text, 3:1 for large text and for interface elements such as form field borders and icons.
- What counts as large text?
- Text of at least 24 px, or at least 18.5 px in bold. Below that, the body text threshold applies.
- How is the ratio calculated?
- It compares the relative luminance of the two colours, using the WCAG formula. It ranges from 1:1 (identical colours) to 21:1 (black on white). The ratio is never rounded up: 4.49:1 does not meet 4.5:1.
- How is the suggested colour chosen?
- It keeps your text’s hue and saturation and only changes its lightness, just enough to reach the threshold. Your brand palette stays recognisable.
- What about semi-transparent colours?
- Enter the colour actually displayed, once blended with the background. For text over an image or a gradient, check the least contrasted spot.
Further reading
- Colour contrast: the WCAG and RGAA ratios to meet4.5:1 for text, 3:1 for large text and components: the rules and pitfalls.
- Test a page’s accessibilityFree test on desktop and mobile, no account needed.
- RGAA vs WCAG: what’s the difference?WCAG sets the rules; the French RGAA is the method used to check them.
- All guidesRGAA, WCAG, EAA, contrast: clear answers.