Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.
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.
About this tool
ShowHide
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.
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
- Colour Contrast and Accessible PalettesWhat the WCAG contrast ratios actually measure, why a colour that looks fine can still fail, how colour blindness changes the picture, and how to build a palette that holds up.
- HEX, RGB, HSL and OKLCH: Choosing a Colour FormatWhat HEX, RGB, HSL and OKLCH store, why HSL lightness is not perceived lightness, when OKLCH helps, and why screen colour is not print colour.
Related tools
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
Color & CSS
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.
Color & CSS
CSS Filter Playground
Visually compose blur, brightness, contrast, hue, sepia, invert, and more — copy the CSS filter or Tailwind arbitrary value.
Color & CSS
Color Palette Generator
Pick a base color, get classic color-wheel harmonies — complementary, split-complementary, triadic, tetradic, square, analogous, monochromatic.
Color & CSS
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color & CSS
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
Color & CSS