WCAG Color Contrast Checker for Text and Background Colors

Enter a text color and a background color as hex codes. You get the contrast ratio, five WCAG pass or fail results and a live preview of your own sample text.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Contrast ratio

6.29:1

Live preview

The quick brown fox

WCAG results

AA normal text: Pass; Needs 4.5:1
AA large text: Pass; Needs 3:1 at 18pt or 14pt bold
AAA normal text: Fail; Needs 7:1
AAA large text: Pass; Needs 4.5:1
UI components: Pass; Needs 3:1 for borders and icons

Colours

Text

Background

Quick answers

What contrast ratio does WCAG AA require?: 4.5:1 for normal text and 3:1 for large text, under success criterion 1.4.3. Large text is at least 18 point (24px), or 14 point (about 18.66px) if bold. Interface components and meaningful graphics need 3:1 under criterion 1.4.11.
What contrast ratio does WCAG AAA require?: 7:1 for normal text and 4.5:1 for large text, under success criterion 1.4.6. On a white background the lightest gray that reaches 7:1 is #595959. AAA is not required by most accessibility laws, which usually point to level AA.
What is a good contrast ratio for text?: At least 4.5:1 for body text, which is the WCAG AA minimum. 7:1 or more is better for long reading and meets AAA. Black on white is the maximum possible, 21:1. Many readable dark gray text colors, such as #333333 on white at 12.63:1, sit well above both thresholds.
What is the lightest gray that passes AA on white?: #767676, which scores 4.54:1 on a white #ffffff background. One step lighter, #777777, scores 4.48:1 and fails normal text. Any gray lighter than that passes only as large text, and from #959595 upward a gray fails even the 3:1 large text level.
Does white text on a colored button pass?: It depends on how dark the button is. White on #2563eb blue is 5.17:1 and passes AA. White on the lighter #3b82f6 is 3.68:1, white on #16a34a green is 3.30:1 and white on #f97316 orange is 2.80:1, so all three fail for normal size text.
Does it matter which color is the text and which is the background?: Not for the ratio. The formula always divides the lighter color by the darker one, so #808080 on white and white on #808080 both give 3.95:1. Swapping the two fields changes only the preview.

Why use Colour Contrast Checker

This WCAG color contrast checker calculates the contrast ratio between two hex colors and tests it against every WCAG 2 threshold at once. Normal text needs 4.5:1 for level AA and 7:1 for level AAA. Large text, meaning 18 point (24px) or 14 point bold (about 18.66px) and above, needs 3:1 for AA and 4.5:1 for AAA. Borders, icons and other interface components need 3:1. The default indigo #4f46e5 on white scores 6.29:1, which passes everything except AAA for normal text. A preview panel renders your sample text in the two colors at a size you choose, so you can judge a borderline pair by eye as well.

WCAG contrast requirements at a glance

What you are checking	Level AA	Level AAA	WCAG success criterion
Normal text (under 18pt, or under 14pt bold)	4.5:1	7:1	1.4.3 (AA), 1.4.6 (AAA)
Large text (18pt / 24px and up, or 14pt / 18.66px bold and up)	3:1	4.5:1	1.4.3 (AA), 1.4.6 (AAA)
UI components: input borders, focus rings, icons that carry meaning	3:1	No AAA level	1.4.11
Graphics needed to understand content, such as chart lines	3:1	No AAA level	1.4.11
Disabled controls, decoration, logos	No requirement	No requirement	Exempt

The tool reports the first three rows. The UI components result uses the same 3:1 cut-off as AA large text.

Contrast ratios of common color pairs

Every ratio and result below is the tool's output for the hex codes shown.

Text	Background	Ratio	AA normal	AA large	AAA normal
Black #000000	White #ffffff	21.00:1	Pass	Pass	Pass
Dark gray #333333	White #ffffff	12.63:1	Pass	Pass	Pass
Gray #595959	White #ffffff	7.00:1	Pass	Pass	Pass
Gray #767676	White #ffffff	4.54:1	Pass	Pass	Fail
Gray #777777	White #ffffff	4.48:1	Fail	Pass	Fail
Gray #808080	White #ffffff	3.95:1	Fail	Pass	Fail
Gray #999999	White #ffffff	2.85:1	Fail	Fail	Fail
Blue #0000ff	White #ffffff	8.59:1	Pass	Pass	Pass
Red #ff0000	White #ffffff	4.00:1	Fail	Pass	Fail
Green #008000	White #ffffff	5.14:1	Pass	Pass	Fail
Orange #ffa500	White #ffffff	1.97:1	Fail	Fail	Fail
Yellow #ffff00	White #ffffff	1.07:1	Fail	Fail	Fail
Black #000000	Yellow #ffff00	19.56:1	Pass	Pass	Pass
Red #ff0000	Black #000000	5.25:1	Pass	Pass	Fail
Light gray #e5e7eb	Near black #111827	14.33:1	Pass	Pass	Pass

How the contrast ratio is calculated

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

L1 is the relative luminance of the lighter color and L2 of the darker one. To get relative luminance, divide each of the red, green and blue values by 255, then linearize it: values of 0.03928 or less are divided by 12.92, larger values become ((value + 0.055) / 1.055) raised to the power 2.4. Add the three results weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue. White has a luminance of 1 and black 0, so black on white is 1.05 / 0.05 = 21, the highest ratio there is, and two identical colors give 1. Green carries by far the largest weight, which is why pure green or yellow text is so weak on white while pure blue is strong.

Worked contrast checks

Brand color as body text

Text colour #4f46e5, Background colour #ffffff

Contrast ratio 6.29:1. AA normal Pass, AA large Pass, AAA normal Fail, AAA large Pass, UI components Pass.

Placeholder gray

Text colour #9ca3af, Background colour #ffffff

Contrast ratio 2.54:1. Fails all five checks.

The slightly darker #6b7280 reaches 4.83:1 and passes AA for normal text.

White label on a red button

Text colour #ffffff, Background colour #dc2626

Contrast ratio 4.83:1. AA normal Pass, AAA normal Fail.

Just under the line

Text colour #777777, Background colour #ffffff

Contrast ratio 4.48:1. AA normal Fail, AA large Pass.

The tool compares the unrounded ratio with 4.5. WCAG does not allow rounding up, so 4.48 is a fail.

What the checker does not cover

The tool compares two solid, fully opaque colors. It does not accept an alpha value, so for semi-transparent text or overlays you need to work out the blended color first and enter that. For text on a gradient or a photo, sample the lightest and darkest parts of the background behind the text and check each against the text color; the worst result is the one that counts.

The Preview text size slider changes only the preview. It does not decide whether your text is large: read the AA large text row if your text is at least 24px, or at least 18.66px and bold, and the AA normal text row otherwise. The tool reports the ratio and the results but does not suggest a replacement color. To fix a failing pair, darken the darker color or lighten the lighter one in small steps and watch the ratio.

The ratio is the WCAG 2 measure that current standards and laws refer to. It ignores font weight and treats dark on light the same as light on dark, so some passing pairs on dark backgrounds are harder to read than the number suggests. Use the preview and treat 4.5:1 as a floor, not a target.

How to use it

1
Enter the Text colour as a hex code or pick it with the color swatch.
2
Enter the Background colour the text will sit on.
3
Read the Contrast ratio at the top, shown to two decimals against 1.
4
Check the WCAG results panel: AA normal text, AA large text, AAA normal text, AAA large text and UI components each show Pass or Fail with the ratio they need.
5
Type your own wording into Sample text and drag Preview text size between 12px and 40px to see the pair at the size you will use.

Questions people ask

What counts as large text in pixels?

24 CSS pixels or more at regular weight, or about 18.66 pixels or more when bold. Those are the pixel equivalents of 18 point and 14 point. Text below those sizes is normal text and needs the higher 4.5:1 ratio for AA.

Is a 4.5:1 ratio required by law?

Many accessibility rules, including Section 508 in the United States and EN 301 549 in the European Union, incorporate WCAG level AA, which contains the 4.5:1 and 3:1 text requirements. What applies to a particular site depends on the jurisdiction and the organization, so check the rules that cover you.

Do placeholder text and disabled buttons need to pass?

Placeholder text is real text and needs 4.5:1 like any other. Disabled controls are exempt from the contrast requirement, as are purely decorative elements and logos. Keeping disabled controls reasonably visible still helps people notice that they exist.

Do link colors need to contrast with the surrounding text?

Links need 4.5:1 against the background like other text. If color is the only thing that marks a link, with no underline, the link color should also contrast 3:1 with the surrounding text. Check that by entering the link color and the body text color as the two fields.

Can I enter RGB values, color names or 8-digit hex codes?

No. Both fields take 3-digit or 6-digit hex codes, with or without the # sign, in upper or lower case. Convert rgb() or hsl() values to hex first. An 8-digit code with an alpha channel is rejected as not a valid hex color.

Why does pure red on white fail AA?

Pure red #ff0000 has a relative luminance of about 0.21, which gives 4.00:1 against white, under the 4.5:1 needed for normal text. A darker red such as #dc2626 reaches 4.83:1 on white and passes.

Does this use APCA or WCAG 3?

No. It uses the WCAG 2 contrast ratio, the one defined in WCAG 2.0, 2.1 and 2.2. APCA is a different method being developed for a future version of the guidelines and produces a lightness contrast value, not a ratio. It is not yet part of any published standard.

Does the preview show exactly what users will see?

It shows your sample text in the two colors at the chosen size, in the page's own typeface. Your site's font, weight and rendering may differ, and thin fonts look fainter at the same ratio. Use it as a quick sense check alongside the numbers.