What contrast ratio do I need?

At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA. AAA requires 7:1 and 4.5:1 respectively.

What counts as large text?

Text at 18 point (24 px) or bigger, or 14 point (about 18.7 px) or bigger when bold.

Does the contrast ratio apply to logos and images?

Logos and purely decorative elements are exempt. Images of text and informative graphics have their own requirements.

Why does a pair that looks fine fail?

Perception varies by display and by person. The ratio is a standard measure that works across users, including those with low vision.

Is black on white the best?

It has the maximum ratio of 21:1, but very high contrast can cause glare for some readers. Slightly softer pairs that still exceed 7:1 are common.

Color Contrast Checker – WCAG AA & AAA Contrast Ratio

Choose a text color and a background color. You get the contrast ratio and whether it passes the WCAG 2.x AA and AAA levels.

Why contrast matters

Text is only readable if it stands out from its background. Low-contrast text is hard to read for people with low vision or colour deficiency, on a phone in sunlight, or on a cheap monitor. Accessibility law and guidance in many countries refer to the Web Content Accessibility Guidelines (WCAG), which define measurable contrast thresholds. Checking your colour pairs is one of the quickest ways to improve a design's accessibility.

How the ratio is calculated

WCAG 2.x measures contrast as a ratio between the relative luminance of the lighter and darker colour: (L1 + 0.05) ÷ (L2 + 0.05). Relative luminance is a weighted sum of the red, green and blue channels after converting each from sRGB to linear light, with green weighted most heavily (0.7152), red next (0.2126) and blue least (0.0722), because the eye is more sensitive to green. The ratio ranges from 1:1 (identical colours) to 21:1 (black on white).

The pass levels

AA, normal text: at least 4.5:1.
AA, large text: at least 3:1. Large means 18 point (24 px) or larger, or 14 point (about 18.7 px) bold or larger.
AAA, normal text: at least 7:1. AAA, large text: at least 4.5:1.
User interface components such as input borders and icons, and meaningful graphics: at least 3:1 against adjacent colours.

For example, mid-grey #777777 text on white has a ratio of about 4.48:1, narrowly failing AA for normal text, while the slightly darker #767676 just passes.

Limits of the numbers

Passing the ratio is necessary but not sufficient. Thin fonts, small sizes, patterned backgrounds and text over images can be hard to read even at a high ratio. WCAG 2.x also has known weaknesses with some dark-mode colour pairs, and a newer method (APCA) is being researched for later standards. Colour should not be the only way to convey information, so add icons, labels or underlines to links. Disabled controls and pure decoration are exempt from the requirement.

Privacy

The calculation runs in your browser only. Enter colours as 3 or 6-digit hex codes, with or without the # sign, or use the pickers.

Color Contrast Checker (WCAG)