Color Contrast Checker

How to use

1. 1Enter your foreground color (text) in HEX, rgb(), or hsl() format, or pick it with the color swatch.
2. 2Enter your background color the same way, or click a preset to load a known pairing.
3. 3Read the contrast ratio at the top right (the higher the better, with 21:1 the maximum) and the AA, AAA, and UI grade badges below.
4. 4Tweak preview text to match your real copy, then use Swap colors, Reset, or Copy report as needed.

About this tool

Color Contrast Checker measures the WCAG 2.1 / 2.2 contrast ratio between any foreground and background color and grades the result against every published threshold in one panel. Enter colors as HEX (#fff, #ffffff, or 8-digit with alpha), as rgb() or rgba(), or as hsl() or hsla(); the tool also exposes a native color picker for each side so you can dial in a value visually. Each color is parsed locally, alpha values are composited over white so the result remains a valid opaque pair, and the tool computes relative luminance using the standard sRGB gamma curve before producing the (L1 + 0.05) / (L2 + 0.05) ratio. The live preview swatch renders your real preview text at three sizes (large heading, body, small caption) on top of a UI component sample so you can see exactly how the pair reads in product, not just as numbers. The grade panel shows pass or fail badges for AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), AAA large text (4.5:1), and the WCAG 2.1 non-text contrast requirement for borders, icons, and focus rings (3:1), so you can confirm in one glance whether a color choice meets your accessibility target. Quick presets cover common starting points (white on blue, black on white, dark gray on white, white on dark, yellow on black, plus a deliberately failing low-contrast pair so you can see what red badges look like). Swap colors flips foreground and background, Reset returns to the defaults, Copy report yields a plain-text summary you can paste into a code review or accessibility audit, and Copy HEX next to each input grabs a normalized hex value. Useful for designers picking palettes, developers verifying CSS tokens, content editors checking buttons and link colors, accessibility leads running site audits, and anyone shipping web copy that needs to remain readable for users with low vision. Everything runs locally in your browser, so the colors and preview text you experiment with never leave your device.

Free to use. Works in your browser. No signup, no login.