Color Contrast Checker
Ensure your designs are accessible and meet WCAG 2.2 compliance standards with our professional-grade contrast evaluation tool.
Color Selector
WCAG Scoring
Live Evaluation
The current contrast ratio is 0.00:1. This color combination fails to meet basic accessibility standards. We recommend adjusting one of the colors to improve readability.
Visual Samples
Functional Minimalism
Lucky Graphics provides high-quality design assets for modern creators. Building a sustainable web requires attention to detail and accessibility.
BOLD PREVIEW
Visual clarity is the foundation of professional design.
WCAG 2.2 AA
The standard for most web content. Requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
WCAG 2.2 AAA
The enhanced standard. Requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
What is Large Text?
Large text is defined as text that is at least 18pt (approx 24px) or 14pt (approx 18.67px) and bold.
How the contrast checker works
The checker answers one question: is this text color readable enough on this background, by the measure that the Web Content Accessibility Guidelines use? WCAG 2.2 sets a minimum of 4.5:1 for normal body text and 3:1 for large text at level AA (success criterion 1.4.3), and 7:1 and 4.5:1 at level AAA (criterion 1.4.6). Icons, input borders, focus rings and chart marks that someone needs in order to use the page need 3:1 against the colors next to them (criterion 1.4.11, Non-text Contrast). Type or paste two hex colors and the tool reports the ratio and which of those thresholds the pair passes. Everything runs in your browser; nothing you type is sent anywhere.
The formula
Contrast is not computed from hue or from the HSL lightness number in a color picker. WCAG uses relative luminance, which weights the red, green and blue channels by how bright each looks to the eye. For each 8-bit channel the tool divides by 255, then linearizes it: values at or below 0.04045 are divided by 12.92, and values above are transformed as ((value + 0.055) / 1.055) raised to the power 2.4. Luminance is then L = 0.2126 R + 0.7152 G + 0.0722 B, a number from 0 for black to 1 for white. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color, so results run from 1:1 (identical colors) to 21:1 (black on white). Green carries over 70 percent of the weight, which is why a saturated green and a saturated blue that look equally strong can score very differently.
A worked example
Take mid-gray text, #767676, on white. Each channel is 118, and 118 / 255 = 0.4627. That is above the 0.04045 cutoff, so it becomes ((0.4627 + 0.055) / 1.055)^2.4 = 0.1812. All three channels are equal, so L = 0.1812. White has L = 1. The ratio is (1 + 0.05) / (0.1812 + 0.05) = 1.05 / 0.2312 = 4.54, which clears the 4.5:1 AA threshold for body text. Move one step lighter, to #777777 (channels of 119), and the same arithmetic gives L = 0.1845 and a ratio of 4.478:1, which fails. The checker above shows it as 4.47:1, because it cuts the ratio to two decimals instead of rounding, so a failing value can never be displayed as a pass. One unit of gray on each channel is the difference between pass and fail, which is why designers check rather than eyeball.
| What you are checking | AA minimum | AAA | WCAG 2.2 criterion |
|---|---|---|---|
| Body text and labels | 4.5:1 | 7:1 | 1.4.3 / 1.4.6 |
| Large text: at least 18pt (24 CSS px), or 14pt (about 18.7 CSS px) bold | 3:1 | 4.5:1 | 1.4.3 / 1.4.6 |
| Icons, input borders, focus indicators, chart marks needed to understand content | 3:1 against adjacent colors | none set | 1.4.11 |
| Disabled controls, logos, pure decoration | no requirement | no requirement | 1.4.3 exceptions |
Assumptions and limits
The checker assumes solid sRGB colors. It cannot see transparency, so if your text color has an alpha value, blend it with the background first and check the blended color. Text over a photo or gradient has no single background: check against the lightest and darkest areas the text actually crosses. The point sizes in the large-text rule are CSS points (one point is 1.333 CSS pixels), not the point size in a print layout, and very thin or decorative typefaces can be hard to read even when the ratio passes. Passing contrast is one success criterion, not an accessibility audit: color must also not be the only way information is conveyed (criterion 1.4.1), and focus must remain visible.
WCAG 3 drafts discuss a different contrast model, but WCAG 2.2 is the published W3C Recommendation and the version most accessibility policies cite, so this tool reports against it. For building whole palettes that pass these checks by design, see the guide to accessible color systems, and for charts, where 1.4.11 applies to lines and bars, the chart color accessibility checklist. Dark interfaces raise their own problems with pure black and pure white; the dark mode design guide covers them.
Formula and thresholds: W3C, Web Content Accessibility Guidelines (WCAG) 2.2, glossary entries for relative luminance, contrast ratio and large scale text, and success criteria 1.4.3, 1.4.6 and 1.4.11 (https://www.w3.org/TR/WCAG22/), checked October 22, 2026. The linearization cutoff of 0.04045 replaced 0.03928 in May 2021; for 8-bit colors the two give the same result. This tool supports accessibility work but is not legal or compliance advice.