How this calculator works
This tool checks whether two colors have enough contrast to be read comfortably, using the exact formula from the Web Content Accessibility Guidelines (WCAG) 2.1. Enter a foreground (text) color and a background color as hex codes, and it returns the contrast ratio along with a plain pass or fail for every WCAG conformance level.
Contrast ratio depends only on the relative luminance of each color, not on hue, so two colors that look very different can still fail if their luminance is close (for example, a mid-blue on a mid-gray). WCAG defines separate, lower thresholds for large text (at least 18pt, or 14pt bold) and for the borders of interactive UI components, since bigger or simpler shapes stay legible at lower contrast.
The WCAG 2.1 formula
Linearize each 0-255 channel: c = channel ÷ 255; if c ≤ 0.03928 then c ÷ 12.92, else ((c + 0.055) ÷ 1.055)^2.4Relative luminance: L = 0.2126·R + 0.7152·G + 0.0722·BContrast ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)WCAG 2.1 AA thresholds: normal text 4.5:1, large text (18pt+/14pt+ bold) or UI components 3:1WCAG 2.1 AAA thresholds: normal text 7:1, large text 4.5:1L_lighter and L_darker are whichever of the two colors' luminance values is larger and smaller — the formula is symmetric, so it doesn't matter which color is foreground or background.
Worked example: #767676 text on a white background
- Convert #767676 (118, 118, 118) and #FFFFFF (255, 255, 255) to the 0-1 range: 0.4627 and 1.0 for every channel.
- Linearize: for 0.4627, since it's above 0.03928, use ((0.4627+0.055)/1.055)^2.4 ≈ 0.1812 for R, G, and B; white linearizes to 1.0 for all channels.
- Relative luminance: gray ≈ 0.2126(0.1812) + 0.7152(0.1812) + 0.0722(0.1812) = 0.1812 (the weights sum to 1, so an equal-RGB gray always keeps its linear value); white = 1.0.
- Contrast ratio = (1.0 + 0.05) ÷ (0.1812 + 0.05) ≈ 4.54:1 — just over the 4.5:1 AA threshold for normal text.
Frequently asked questions
What contrast ratio do I actually need?
WCAG 2.1 AA (the most commonly required level, including for ADA and EN 301 549 compliance) needs 4.5:1 for normal text and 3:1 for large text (18pt+/14pt+ bold) or UI component borders and icons. The stricter AAA level needs 7:1 for normal text and 4.5:1 for large text.
Why does color hue not matter here?
The formula only uses relative luminance — a measure of how much light a color reflects, weighted toward how the human eye perceives green as brightest and blue as darkest. Two colors of very different hue but similar luminance (like a saturated orange and a mid-gray) can still fail contrast.
Does this check color blindness accessibility?
No. WCAG contrast ratio is a luminance-only check and passes some color pairs that are hard to distinguish for color-blind users (for example, certain red/green combinations at high contrast). Use it alongside not relying on color alone to convey information.
What counts as 'large text' for the lower 3:1 threshold?
WCAG defines large text as at least 18 point (24px) regular weight, or at least 14 point (about 18.5px) bold. Anything smaller must meet the stricter 4.5:1 normal-text threshold.
Is a higher ratio always better?
For readability, yes, up to a point — but very high contrast (like pure black on pure white, 21:1) can cause eye strain for some readers during long reading sessions. Many style guides intentionally use a slightly softer near-black instead of pure black while still clearing the 4.5:1 minimum.