Color Contrast Checker
Enter a text (foreground) color and a background color — with the picker or by typing a 3- or 6-digit hex code — and the tool computes the WCAG 2 contrast ratio and grades it against all four common thresholds at once: AA and AAA, each for normal and large text. Under the hood it converts each color from gamma-encoded sRGB to linear light, weights the channels into relative luminance (the WCAG coefficients: 0.2126 R, 0.7152 G, 0.0722 B), and takes (L1 + 0.05) ÷ (L2 + 0.05). Ratios range from 1:1 (identical colors) to 21:1 (black on white). The pass/fail cutoffs come straight from WCAG 2.1 success criteria 1.4.3 and 1.4.6: normal text needs 4.5:1 for AA and 7:1 for AAA, while large text (≥ 24px, or ≥ 18.66px bold) needs 3:1 and 4.5:1. A live preview renders your combination at both a body and a heading size, because a mathematically passing pair can still deserve a second look. Everything runs locally in your browser.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
How to use
- Set the foreground (text) color with the picker or by typing a hex code — both #RGB and #RRGGBB forms are accepted.
- Set the background color the same way.
- Read the contrast ratio and the four AA/AAA badges — green means pass, red means fail.
- Check the live preview at body and heading sizes; when a pair barely passes, consider darkening or lightening one color for comfort.
Frequently asked questions
- What ratios do AA and AAA require?
- WCAG 2.1 success criterion 1.4.3 (AA) requires 4.5:1 for normal text and 3:1 for large text; 1.4.6 (AAA) raises those to 7:1 and 4.5:1. AA is the level most laws and procurement standards reference; AAA is a stricter target for maximum readability.
- What counts as large text?
- Text of at least 18pt (24px), or at least 14pt (18.66px) if bold. WCAG defines the cutoffs in points; the pixel equivalents assume the standard 96 dpi CSS ratio, so a 24px regular heading or a 19px bold label qualifies.
- Do these ratios apply to icons and UI components?
- WCAG 2.1 adds criterion 1.4.11 (non-text contrast): interface components, focus indicators, and meaningful graphics need at least 3:1 against adjacent colors. That is the same threshold as the AA large-text badge, so you can use it as a quick proxy for icons and borders.
- Does the checker support transparency?
- No — the ratio is defined for solid colors. If your text or overlay uses alpha, composite it against the real background first (60% black on white is effectively #666666) and test the flattened result.
- Is the WCAG 2 formula the final word on legibility?
- It's the normative standard — cited by ADA cases, EN 301 549, and Section 508 — but it's imperfect: it tends to overrate light-on-dark (dark mode) pairs. The proposed APCA model in draft WCAG 3 addresses this; until it lands, meet the WCAG 2 ratios and trust your eyes in the preview.
Guides on this topic
Related tools
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
Color Brightness Compare (HSL vs Lab L* vs WCAG vs HSP)
Compare seven different brightness metrics — HSL Lightness, HSV Value, WCAG Relative Luminance / LRV, CIE Lab L* perceived lightness, Rec. 709 Luma, HSP Perceived Brightness, and naïve (R+G+B)/3 — for one or two colors side by side, with deltas to show why a 'lighter' color can actually feel darker.
CSS Filter Playground
Visually compose blur, brightness, contrast, hue, sepia, invert, and more — copy the CSS filter or Tailwind arbitrary value.
Color Palette Generator
Pick a base color, get classic color-wheel harmonies — complementary, split-complementary, triadic, tetradic, square, analogous, monochromatic.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.