Search for a command to run...
Check the WCAG 2.1 contrast ratio of any color pair and see AA and AAA results instantly.
Accepts #RGB, #RRGGBB, #RRGGBBAA, rgb()/rgba() and hsl()/hsla(). CSS color names are not supported.
Alpha is composited over the background before measuring, and a translucent background is composited over white.
Suggested passing color
Walks the foreground lightness toward black and toward white until AA 4.5:1 is met, then offers the nearest match.
Contrast ratio
3.66:1
#7B8794 / #FFFFFF
AA normal text
Minimum 4.5:1
AA large text
Minimum 3.0:1
AAA normal text
Minimum 7.0:1
AAA large text
Minimum 4.5:1
Non-text and UI components
Minimum 3.0:1
Preview
Normal text at 16px, the size most body copy uses.
Large text 24px bold
What
A color contrast checker measures the relative luminance ratio between a foreground and a background color, the value WCAG 2.1 uses to decide whether text is readable. This tool parses hex, rgb() and hsl() values, composites alpha over the background, and reports every AA and AAA threshold.
Cases
Verify body text contrast before shipping a design system token.
Check whether a muted gray placeholder still meets AA.
Test button and icon colors against the 3:1 non-text requirement.
Audit a dark mode palette alongside its light mode counterpart.
Find the nearest accessible shade when a brand color fails AA.
Document contrast results in an accessibility review ticket.
How To
Enter a foreground and a background color, then read the WCAG verdicts.
Pick a color with the swatch or type a hex, rgb() or hsl() value.
Repeat for the background, and use Swap colors to reverse the pair.
Check the ratio plus the AA, AAA and non-text pass or fail badges.
Apply the suggested passing color if needed, then copy the report.
Knowledge
FAQ