Contrast checker

About Contrast checker

Computes the WCAG contrast ratio between two colors in your browser and shows AA and AAA pass or fail for normal and large text.

Accessibility contrast math is simple on paper and annoying when you're juggling hex pairs in a spreadsheet. I built the checker I use before I ship a button color: foreground and background in, ratio out, plus plain pass or fail rows for WCAG AA and AAA at normal and large text sizes. Relative luminance follows the W3C sRGB formula. Everything runs locally; your brand palette never visits a third-party checker. Paste the same formats the color converter accepts so you are not reformatting hex by hand between pages.

The thresholds are the ones you expect. AA normal text wants at least 4.5:1. AA large text wants at least 3:1. AAA normal wants 7:1. AAA large wants 4.5:1. Large text here means eighteen point regular or fourteen point bold, the WCAG definitions, not whatever your design tool labels as 'display'. The ratio is symmetric: swapping foreground and background gives the same number, because contrast is about the pair, not which one you typed first. The formatted ratio shows two decimal places, which is enough for design review without pretending to be a lab instrument. Fail rows are plain language so you can screenshot the panel for a ticket without translating numbers yourself.

This checks two solid colors. It does not simulate semi-transparent overlays, gradient text, text on photographs, or non-sRGB displays. It won't tell you whether your focus ring is visible or whether daltonism makes two hues indistinguishable. Use it to catch obvious failures in flat UI tokens before you argue about them in review. Pair it with the color converter when you need to nudge a hex until the ratio clears four point five. If you sampled a pixel from a photo, remember the eyedropper reports screen values, not a legal accessibility sign-off on a busy background. Passing here is necessary for flat text on flat fills; it is not sufficient for every accessibility requirement in WCAG.

How to use Contrast checker

1. 1Enter a foreground and a background color in any supported format.
2. 2Read the contrast ratio and the AA and AAA pass or fail rows.
3. 3Adjust either color until the level you need passes, then copy the values.

What it won't do

• ·Two opaque sRGB colors only. No alpha compositing or gradient sampling.
• ·WCAG contrast ratio only. No focus ring, motion, or non-text UI rules.

Common questions

Related tools

• Color converterHEX, RGB, HSL, and CMYK with a live swatch.
• Color pickerEyedropper with hex / RGB / HSL.
• Color paletteDominant colors with hex codes.