Contrast Ratio Calculator
Enter a foreground and background hex color to get the WCAG 2.x contrast ratio and instant AA/AAA pass/fail verdicts for normal text, large text, and graphical user interface components. The relative luminance of each color is shown so you can see exactly how the ratio is built.
Formula
Worked example
Black text (#000000) on white (#ffffff): both colors linearize trivially to L=0 and L=1. Contrast ratio = (1 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21:1, the maximum possible, passing both AA and AAA at all text sizes.
What is a contrast ratio?
A contrast ratio measures the difference in perceived brightness between two colors. It is expressed as a number followed by :1, where 1:1 means the two colors are identical and 21:1 is the theoretical maximum (pure black against pure white). The calculation is based on relative luminance, which is a weighted sum of linearized red, green, and blue channel values. The human eye is most sensitive to green light, so the green channel carries the largest weight (0.7152) in the luminance formula. A contrast ratio of 4.5:1 roughly corresponds to the point where most people with normal vision start to find text reliably readable on a contrasting background.
WCAG 2.x conformance levels explained
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios at two conformance levels. Level AA is the legal and practical baseline required by many accessibility laws worldwide, including Section 508 in the United States, the European Accessibility Act, and the UK Equality Act. It requires at least 4.5:1 for body-size text and 3:1 for large text or UI components such as input borders, focus indicators, and icon-only buttons. Level AAA raises those thresholds to 7:1 and 4.5:1 respectively and is recommended for the most critical content. "Large text" under WCAG 2.x means 18 pt (24 px) or larger in regular weight, or 14 pt (~18.67 px) or larger in bold. Decorative images, purely ornamental shapes, inactive disabled controls, and logotypes are exempt from contrast requirements.
How to improve a failing contrast ratio
The most reliable fix is to adjust the lightness of one or both colors without changing their hue. Darkening a text color or lightening a background almost always raises the ratio more efficiently than any other adjustment. If brand colors are locked, try increasing the font size or weight so the content qualifies for the lower large-text threshold. You can also add a solid contrasting border around an icon or button to meet the 3:1 UI-component requirement without touching the fill color. When the design requires a light-gray-on-white aesthetic, consider using dark-on-white for body text and reserving the low-contrast palette for purely decorative elements. Testing with a color-blindness simulator alongside the ratio check covers a wider range of users, because luminance contrast does not capture all color-vision deficiency scenarios.
Why relative luminance differs from perceived brightness
Relative luminance is a physical measure defined by the sRGB color space standard, not a perceptual one. It corrects for the gamma encoding baked into most screen colors (the linearization step), then combines channels with the physiological weights derived from photoreceptor sensitivity research. However, human brightness perception is also non-linear and context-dependent. A gray square surrounded by black looks lighter than the same gray surrounded by white, even if their luminance values are identical. This means a ratio that barely passes may feel less readable in practice than the number suggests, especially for people with low vision who rely on strong contrast. WCAG AAA at 7:1 provides a comfortable margin for most low-vision users, while 4.5:1 is a minimum, not a target.
WCAG 2.x contrast ratio requirements
| Content type | Level AA | Level AAA |
|---|---|---|
| Normal text (below 18 pt / 24 px) | 4.5:1 | 7:1 |
| Large text (18 pt / 24 px or bolder 14 pt) | 3:1 | 4.5:1 |
| UI components and graphical objects | 3:1 | Not specified |
| Decorative or disabled content | No minimum | No minimum |
| Logotypes | No minimum | No minimum |
Web Content Accessibility Guidelines 2.1 minimum contrast ratios by conformance level and content type.
Frequently asked questions
What contrast ratio do I need for WCAG AA?
For normal text (below 18 pt or 24 px), WCAG 2.1 Level AA requires at least 4.5:1. For large text (18 pt / 24 px or bolder 14 pt / ~19 px), the minimum is 3:1. UI components such as button borders, form input outlines, and icon-only controls also require 3:1.
What is the difference between AA and AAA?
Level AA is the widely adopted baseline that most legal standards and audits check against. Level AAA goes further: 7:1 for normal text and 4.5:1 for large text. AAA is recommended for high-stakes content where users with low vision or cognitive differences are a key audience, but it is not required by most accessibility laws.
How is contrast ratio calculated?
The WCAG formula divides the relative luminance of the lighter color (plus 0.05) by the relative luminance of the darker color (plus 0.05). Relative luminance is computed by first linearizing each sRGB channel to remove gamma encoding, then combining them as 0.2126 R + 0.7152 G + 0.0722 B. The 0.05 constants represent the luminance contribution of ambient light reflected by a typical display.
Does contrast ratio apply to background images?
Yes, but measuring it is harder. If text sits over a background image, the contrast should be measured against the darkest region of the image that appears under any part of the text. A common fix is to add a semi-opaque overlay between the image and text, or to place text in a solid-color box.
Is 21:1 always the best ratio?
Pure black on white is maximum contrast but is not always ideal. Some users with dyslexia or certain migraine conditions find very high contrast harsh, preferring off-white backgrounds such as #f5f5f5 or slightly reduced black. A ratio of 10:1 to 15:1 often meets both needs. The key is staying well above your minimum threshold while giving users the option to adjust contrast if possible.
Do icons need to meet contrast requirements?
Yes. WCAG 2.1 success criterion 1.4.11 requires that non-text content used to convey information (icons, charts, form borders) achieves at least 3:1 against adjacent colors. Purely decorative icons without an accessible label are exempt, because they convey no information that a user must perceive.