WCAG ratio
Calculates the contrast ratio between any text and background colour.
Color Contrast Checker (WCAG)
Check text and background colors against WCAG AA and AAA.
- Free
- No sign-up
- Runs in your browser
- Design
Loading tool…
Was this tool useful?
Why use it
Low contrast is one of the most common accessibility problems on the web, and brand colors are often the cause. Enter a text and a background color to get the WCAG contrast ratio, pass or fail results for normal and large text, and a nearby color that passes if yours doesn't.
AA and AAA results
Pass or fail for normal and large text at both levels.
Suggested fix
Proposes the nearest colour that passes, so you keep the brand feel.
How to use it
4 quick steps. Going deeper? Read From jQuery to React in WordPress: an incremental migration that doesn't break the site.
- 01
Pick or type a text color and a background color (hex like #1a2b3c or rgb()).
- 02
Read the contrast ratio and the AA/AAA results.
- 03
If a check fails, apply the suggested color, which keeps the hue and adjusts lightness.
- 04
Check the preview at normal and large sizes.
Who it’s for
Typical situations where this tool saves time.
- DesignersCheck brand palettes before they reach production.
- DevelopersVerify button, link and placeholder colours against WCAG.
- Accessibility reviewsDocument exact ratios in an audit.
Questions
Short answers about privacy, limits and how the tool works.
What ratio do I need?
WCAG 2.2 AA requires 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold) and for UI components. AAA requires 7:1 and 4.5:1.
Does contrast affect SEO?
Not directly, but readable text improves engagement and accessibility, which are part of a good page experience.
Why does white text on my brand color fail?
Mid-tone colors such as many oranges, greens and light blues have similar luminance to white. Darken the color or use dark text.
Need a tool like this inside your product?
I build custom calculators, admin utilities and integrations for WordPress, Laravel and Next.js teams.