What is the minimum contrast ratio for WCAG AA?

4.5:1 for normal text and 3:1 for large text. Large text is at least 18 pt, or at least 14 pt and bold. Text that is decoration, inactive or part of a logo has no contrast requirement.

What contrast ratio does WCAG AAA need?

7:1 for normal text and 4.5:1 for large text. #595959 on white is 7.0047:1, shown as 7.00:1, and passes; #767676 is 4.54:1 and passes AAA only for large text.

How is the contrast ratio calculated?

Each color’s red, green and blue values are linearized, then weighted as 0.2126 R + 0.7152 G + 0.0722 B to give a relative luminance L. The ratio is (L of the lighter color + 0.05) ÷ (L of the darker color + 0.05).

How do I fix a text color that fails AA?

Change its lightness until the ratio reaches 4.5:1. The checker does this for you when AA normal text fails: it keeps the hue and saturation, moves the lightness up or down, whichever needs the smaller change, and shows the nearest color that passes with an Apply button. Gray #aaaaaa on white (2.32:1) becomes #767676 (4.54:1), and red #ff0000 (3.99:1) becomes #ee0000 (4.53:1).

Does a passing ratio mean everyone can read the text?

No. A ratio is a minimum for one pair of colors. It says nothing about font size, weight, spacing or other vision needs, and the color-blindness previews on the page are an approximate preview, not a clinical simulation.

Color Contrast Checker

Enter a text and a background color, with opacity, to get the WCAG contrast ratio and AA and AAA pass or fail for normal and large text. How it works

Foreground color

Opacity100%

Background color

Opacity100%

Preview text

Contrast Ratio

21.00:1

AA Normal Pass · AAA Normal Pass

AA Normal TextPass

21.00:1, 366% above 4.5:1

AA Large TextPass

21.00:1, 600% above 3:1

AAA Normal TextPass

21.00:1, 200% above 7:1

AAA Large TextPass

21.00:1, 366% above 4.5:1

Non-text (UI and graphics)Pass

21.00:1, 600% above 3:1

Hello World

The quick brown fox jumps over the lazy dog.

Small caption text — 14px equivalent

Color Blindness Simulation

Large text is at least 18 pt, or at least 14 pt and bold. Anything smaller is normal text.

AA Normal (4.5:1): Minimum for normal text.

AA Large (3:1): Minimum for large text.

AAA Normal (7:1): Enhanced contrast for normal text.

AAA Large (4.5:1): Enhanced contrast for large text.

Non-text (3:1): WCAG 2.2 criterion 1.4.11, for icons, input borders, focus indicators and graphics against the colour next to them.

The ratio is shown truncated to two decimals, and pass or fail uses the exact value.

About the Color Contrast Checker

WCAG level AA needs a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and level AAA needs 7:1 and 4.5:1. White on black is 21:1. The checker computes the exact ratio of two colors and shows it truncated to two decimals, never rounded up, so #ef0000 on white (4.4966:1) reads 4.49:1 and fails AA for normal text. A fifth card checks the 3:1 non-text rule for icons and borders, and a failing text color gets a suggested replacement.

WCAG 2.1 and 2.2 text contrast thresholds

Level	Normal text	Large text
AA (success criterion 1.4.3)	4.5:1	3:1
AAA (success criterion 1.4.6)	7:1	4.5:1

Large text is at least 18 pt, or at least 14 pt and bold. WCAG 2.2 keeps the same values.

Text colors on white: ratio and pass or fail

Text color	Ratio shown	AA normal	AA large	AAA normal	AAA large
#000000	21.00:1	Pass	Pass	Pass	Pass
#595959	7.00:1	Pass	Pass	Pass	Pass
#767676	4.54:1	Pass	Pass	Fail	Pass
#777777	4.47:1	Fail	Pass	Fail	Fail
#808080	3.94:1	Fail	Pass	Fail	Fail
#949494	3.03:1	Fail	Pass	Fail	Fail
#ff0000	3.99:1	Fail	Pass	Fail	Fail
#ef0000	4.49:1	Fail	Pass	Fail	Fail
#0000ff	8.59:1	Pass	Pass	Pass	Pass

The ratio is the exact value truncated (not rounded) to two decimals; pass or fail uses the exact value. #ff0000 is 3.9985:1 and shows 3.99.

How to use this tool

Enter the foreground (text) and background colors with the pickers or as hex codes, #RGB or #RRGGBB.
Read the ratio and the five cards: AA normal, AA large, AAA normal, AAA large and Non-text (UI and graphics, 3:1), each marked Pass or Fail.
If AA normal text fails, press Apply on the suggested text color: the nearest lightness of the same hue that reaches 4.5:1.
For a semi-transparent color, set its opacity and, if the background is see-through, a backdrop color; the checker draws the background over the backdrop, then the text over that, and measures the result.

Frequently asked questions

What is the minimum contrast ratio for WCAG AA?: 4.5:1 for normal text and 3:1 for large text. Large text is at least 18 pt, or at least 14 pt and bold. Text that is decoration, inactive or part of a logo has no contrast requirement.
What contrast ratio does WCAG AAA need?: 7:1 for normal text and 4.5:1 for large text. #595959 on white is 7.0047:1, shown as 7.00:1, and passes; #767676 is 4.54:1 and passes AAA only for large text.
How is the contrast ratio calculated?: Each color’s red, green and blue values are linearized, then weighted as 0.2126 R + 0.7152 G + 0.0722 B to give a relative luminance L. The ratio is (L of the lighter color + 0.05) ÷ (L of the darker color + 0.05).
How do I fix a text color that fails AA?: Change its lightness until the ratio reaches 4.5:1. The checker does this for you when AA normal text fails: it keeps the hue and saturation, moves the lightness up or down, whichever needs the smaller change, and shows the nearest color that passes with an Apply button. Gray #aaaaaa on white (2.32:1) becomes #767676 (4.54:1), and red #ff0000 (3.99:1) becomes #ee0000 (4.53:1).
Why does a ratio that looks like 4.5 show as 4.49?: The page truncates the ratio to two decimals instead of rounding it, because WCAG says a computed ratio of 4.499:1 does not meet 4.5:1. #ef0000 on white is 4.4966:1, so it shows 4.49:1 and fails; a pair that shows 4.50:1 passes.
Does a passing ratio mean everyone can read the text?: No. A ratio is a minimum for one pair of colors. It says nothing about font size, weight, spacing or other vision needs, and the color-blindness previews on the page are an approximate preview, not a clinical simulation.

Important limitations

The non-text card compares one pair of colors with 3:1; it cannot tell whether that pair is what identifies the control or its state, which is what 1.4.11 asks about. The suggestion changes only the text color. Whether a standard is legally required depends on where and for whom you publish. It uses 0.03928 as the linearization cut-off where WCAG 2.1 now states 0.04045; no 8-bit color value falls between them, so the ratios are identical.

Sources

Last reviewed: 2026-10-22

Which WCAG levels it checks

Check a pair before a design goes to review: a button label on a brand color, a link inside body text, gray helper text under a form field. The four cards test it against success criteria 1.4.3 (level AA) and 1.4.6 (level AAA), which have the same thresholds in WCAG 2.1 and WCAG 2.2. AA needs 4.5:1 for normal text and 3:1 for large text, AAA needs 7:1 and 4.5:1. Large text is at least 18 pt, or at least 14 pt and bold.

Icons, input borders and focus indicators fall under a different AA rule, 1.4.11 Non-text Contrast, which asks for 3:1 against the adjacent colors. The fifth card, Non-text (UI and graphics), checks the same ratio against 3:1.

When a pair fails AA for normal text, the page suggests the nearest text color that passes. Only the lightness changes; hue and saturation stay. Apply puts it in the text color box. Gray #aaaaaa on white is 2.32:1; the suggestion is #767676 at 4.54:1; pure red #ff0000 becomes #ee0000 at 4.53:1.

For a semi-transparent color, set its opacity. The checker draws the background over a backdrop color first and then the text over that result, and measures the blend you would see.

Relative luminance and the ratio

Each 0 to 255 channel c is scaled to c/255, then linearized: if that is 0.03928 or less, divide by 12.92, otherwise use ((c/255 + 0.055) / 1.055) ^ 2.4.

L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L lighter + 0.05) ÷ (L darker + 0.05)

Example: white (L = 1) on black (L = 0) is 1.05 ÷ 0.05 = 21:1. #ef0000 on white is 4.4966:1.

The verdict uses the exact ratio and the page shows it truncated to two decimals, never rounded up, because WCAG says a computed ratio of 4.499:1 does not meet 4.5:1. So #ef0000 on white reads 4.49:1 and fails AA for normal text, and a pair that shows 4.50:1 passes.

Related Tools

View all tools

Dev

RGB to Hex

Convert RGB to a hex color code and back: rgb(255, 136, 0) is #FF8800. Paste #abc, ff8800 or 255,136,0; each channel is a whole number 0 to 255.

Dev

Color Picker

Pick a color or type a HEX, RGB or HSL value to get the other two, the CSS and CMYK forms, and its WCAG contrast ratio on white, black or a second color.

CSS

Hex to RGBA Converter

Convert hex to rgba(): #007BFF is rgba(0, 123, 255, 1). Reads 3, 4, 6 and 8-digit hex or rgb()/rgba(), sets the opacity, and gives hsla() and 8-digit hex.

CSS

Color Palette Generator

Make a 5-color palette from one hex color: monochromatic, complementary, analogous, triadic or split-complementary, with WCAG contrast for each swatch.

CSS

Color Mixer

Mix two to four hex colors by weight in OKLab, sRGB or linear light: red and blue at 50% give #8c53a2 in OKLab. Copy HEX, RGB, HSL, OKLCH or CSS color-mix().

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.