What contrast ratio do I need?

WCAG 2 level AA requires at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 and 4.5:1. Large text means at least 24 px, or at least 18.66 px (14 pt) when bold.

How is the contrast ratio calculated?

Each color's relative luminance L is computed from its linearised RGB values, then the ratio is (L1 + 0.05) / (L2 + 0.05) with the lighter color on top. It ranges from 1:1 (identical colors) to 21:1 (black on white).

Why is the ratio not rounded up?

WCAG thresholds are strict: 4.49:1 does not pass 4.5:1. The checker compares the exact value and shows it truncated to two decimals, so a failing pair never looks like a pass.

Does passing mean my site is accessible?

No. Contrast is one of many WCAG requirements. This tool checks text contrast between two colors only; it does not test your whole page or guarantee compliance.

Color Contrast Checker

Check whether your text and background colors meet WCAG contrast levels.

Text color (foreground)

Background color

Large text (24 px bold)

Normal body text at 16 px. The quick brown fox jumps over the lazy dog.

Small text at 14 px — often used for captions and labels.

Contrast ratio 4.83:1

AA normal text (4.5:1)Pass
AA large text (3:1)Pass
AAA normal text (7:1)Fail
AAA large text (4.5:1)Pass

Closest passing text colors

AAA normal text (7:1): #545964 — 7.02:1

How to check color contrast

Enter the text color and the background color as HEX, rgb(), hsl() or a CSS name — or use the color swatches.
Read the contrast ratio and the four WCAG results for normal and large text.
If a level fails, use one of the suggested text colors: the same hue, only lighter or darker.
Use Swap to check the reverse combination.

WCAG contrast levels

AA, normal text: at least 4.5:1.
AA, large text: at least 3:1. Large means 24 px and up, or 18.66 px (14 pt) and up when bold.
AAA, normal text: at least 7:1.
AAA, large text: at least 4.5:1.

These are the text contrast criteria of WCAG 2 (success criteria 1.4.3 and 1.4.6). The checker covers contrast between two colors only — it is not a full accessibility audit of your site.

How the ratio is calculated

WCAG 2 contrast ratio

channel = c ≤ 0.04045 ? c / 12.92 : ((c + 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)

Results are never rounded up: a pair at 4.499:1 fails AA and is shown as 4.49:1. The classic boundary example is gray on white — #767676 passes AA (4.54:1), while #777777 just misses it (4.48:1).

Related color tools

Find a color in the color picker, which shows its contrast against white and black, build a scheme with the color palette generator, or look up named colors in the HTML color codes list.

Frequently asked questions

What contrast ratio do I need?: WCAG 2 level AA requires at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 and 4.5:1. Large text means at least 24 px, or at least 18.66 px (14 pt) when bold.
How is the contrast ratio calculated?: Each color's relative luminance L is computed from its linearised RGB values, then the ratio is (L1 + 0.05) / (L2 + 0.05) with the lighter color on top. It ranges from 1:1 (identical colors) to 21:1 (black on white).
Why is the ratio not rounded up?: WCAG thresholds are strict: 4.49:1 does not pass 4.5:1. The checker compares the exact value and shows it truncated to two decimals, so a failing pair never looks like a pass.
Does passing mean my site is accessible?: No. Contrast is one of many WCAG requirements. This tool checks text contrast between two colors only; it does not test your whole page or guarantee compliance.