Color Contrast Checker
Check the WCAG 2 contrast ratio between a text colour and a background colour from their hex codes, and see whether the pair passes AA or AAA for normal
Color Contrast Checker
Calculator
Adjust values & calculateEnter your values below. Every result is computed in your browser — no data is sent to any server.
Formula: Contrast Ratio = (L1 + 0.05) / (L2 + 0.05) where L = relative luminance
Worked example — 12.63:1 - passes AA and AAA for all text sizes
Formula
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05) where L = relative luminance
WCAG 2.1 requires 4.5:1 for normal text (AA) and 7:1 for enhanced (AAA). Large text (18pt+): 3:1 (AA) and 4.5:1 (AAA).
Worked Examples
Example 1: Dark grey text on white
Problem:Body text is #333333 on a #FFFFFF background. Does it meet WCAG AA and AAA?
Solution:#333333: each channel 51/255 = 0.200, linearised ((0.200 + 0.055) / 1.055)^2.4 = 0.0331 Relative luminance L2 = 0.0331 (white L1 = 1.0) Contrast = (1.0 + 0.05) / (0.0331 + 0.05) = 1.05 / 0.0831 = 12.63:1 AA needs 4.5:1, AAA needs 7:1 for normal text
Result:12.63:1 - passes AA and AAA for all text sizes
Example 2: Mid grey that just fails AA
Problem:A designer wants #777777 placeholder text on white. Is it compliant?
Solution:#777777: 119/255 = 0.467, linearised ((0.467 + 0.055) / 1.055)^2.4 = 0.1845 Contrast = 1.05 / (0.1845 + 0.05) = 1.05 / 0.2345 = 4.48:1 4.48 is below the 4.5:1 AA minimum for normal text (18pt / 14pt bold large text only needs 3:1) Darkening one step to #767676 gives 4.54:1 and passes
Result:4.48:1 - fails AA for normal text, passes for large text; use #767676 or darker
Example 3: Brand blue link on white
Problem:Links are #1D4ED8 on a white page. Which level do they reach?
Solution:Linearised channels: R 0.0123, G 0.0762, B 0.6866 L = 0.2126 x 0.0123 + 0.7152 x 0.0762 + 0.0722 x 0.6866 = 0.1067 Contrast = 1.05 / (0.1067 + 0.05) = 6.70:1 6.70 clears AA (4.5:1) but not AAA (7:1) for normal text; it clears AAA for large text (4.5:1)
Result:6.70:1 - AA pass, AAA pass for large text only
Frequently Asked Questions
What contrast ratio do I need?
WCAG AA (minimum): 4.5:1 for normal text, 3:1 for large text. WCAG AAA (enhanced): 7:1 for normal, 4.5:1 for large. Most legal requirements mandate AA.
What is WCAG and why does it matter for websites?
WCAG (Web Content Accessibility Guidelines) is an international standard published by the W3C that defines how to make web content more accessible to people with disabilities, including those with visual impairments, color blindness, and low vision. In the United States, websites of federal agencies must meet WCAG 2.0 AA standards under Section 508, and many private companies face legal liability if their sites are inaccessible. Meeting WCAG AA is also good business practice as approximately 8% of men and 0.5% of women have some form of color vision deficiency.
What is relative luminance and how is it calculated?
Relative luminance measures the perceived brightness of a color on a scale from 0 (absolute black) to 1 (pure white). It is calculated by first converting each RGB component to a linear value (applying a gamma correction), then combining them using the formula L = 0.2126 × R + 0.7152 × G + 0.0722 × B. The green channel has the highest weight (71.5%) because human eyes are most sensitive to green light, followed by red (21.3%) and blue (7.2%). The contrast ratio between two colors is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.
Are there color combinations I should always avoid for accessibility?
Several color combinations are problematic for users with color blindness and low contrast: red on green (the most common type of color blindness, affecting 1 in 12 men, cannot distinguish these), green on black, red on black, blue on black, and any low-contrast pastel combinations. Beyond contrast ratio, avoid relying solely on color to convey information — always add a text label, icon, or pattern to differentiate elements. For example, form validation errors should not only turn red but should also show an error icon and descriptive text, ensuring all users can understand the interface regardless of their color perception.
Why does the contrast scale top out at 21:1?
The ratio is (L1 + 0.05) divided by (L2 + 0.05), where L is relative luminance running from 0 for black to 1 for pure white. Substituting those extremes gives 1.05 divided by 0.05, which is exactly 21. The 0.05 term models ambient light reflecting off the screen surface, and it is what stops the ratio diverging toward infinity as the darker colour approaches zero luminance. Black text on a white background is therefore the maximum contrast the formula can report.
What counts as large text under the WCAG thresholds?
WCAG defines large-scale text as at least 18 point, or 14 point when bold, which corresponds to roughly 24px and 18.66px at the standard 96 pixels per inch. Large text only needs 3:1 at level AA and 4.5:1 at AAA, against 4.5:1 and 7:1 for normal text, because heavier strokes cover more pixels and survive lower contrast. The allowance assumes a typical typeface, so a thin or condensed display face at 24px is better judged against the normal-text threshold.
Does WCAG require contrast for buttons, icons and focus rings as well as text?
Yes. Success Criterion 1.4.11 Non-text Contrast, added in WCAG 2.1, requires at least 3:1 between adjacent colours for the parts of a user interface component needed to identify it and for graphics that convey meaning. In practice that covers input borders, toggle states, focus indicators, chart series and icons carrying information. A common failure is a pale grey form outline on white, which reads clearly to a designer on a calibrated monitor but falls below 3:1 for a user on a glare-lit laptop.
Why must sRGB values be linearised before luminance is computed?
The 0 to 255 numbers in a hex colour are gamma-encoded, so they are not proportional to emitted light. Each channel is divided by 255 and then linearised: values at or below 0.03928 are divided by 12.92, and higher values are transformed by ((c + 0.055) / 1.055) raised to the power 2.4. Only after that are the channels weighted 0.2126, 0.7152 and 0.0722. Skipping the step and averaging raw hex values can misjudge a ratio badly, usually flattering mid-tone pairs.
How do I fix a failing pair without abandoning my palette?
Change lightness rather than hue. Because the green coefficient is 0.7152, adjusting the green component moves luminance fastest, while shifting blue barely moves the ratio at all, which is why deep blues can be darkened for text without visibly changing the brand colour. Darkening the foreground and lightening the background both help, and they compound. Reserve the untouched brand colour for large headings and non-text elements, which only need 3:1, and use a darker tint for body copy.
Why can a dark-mode pair pass the ratio test yet still read poorly?
The WCAG 2 formula is a luminance ratio, not a perceptual model, and it is symmetric: it gives the same number whether the light colour is the text or the background. Human contrast perception is not symmetric, and light text on a dark field tends to bloom, so a pair that passes at 4.5:1 in dark mode can look thinner and harder to read than the same numbers in light mode. Verify dark themes visually at real font weights, and consider exceeding the threshold for body text.
References
Background & Theory
History
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer · Editorial policy
Related Calculators
🎨Color Converter
Convert between color formats
🧮Color Palette Generator
Generate harmonious color palettes using complementary, analogous, triadic, and split schemes.
🧮Gradient Generator
Create CSS gradient code from color stops with linear, radial, and conic options.
🧮Depth of Field Calculator
Calculate depth of field with interactive inputs and clear steps.
🧮Hyperfocal Distance Calculator
Calculate hyperfocal distance with interactive inputs and clear steps.
🧮Field of View Calculator (camera)
Calculate field of view (camera) with interactive inputs and clear steps.
🧮Shutter Speed to Freeze Motion Calculator
Calculate shutter speed to stop motion with interactive inputs and clear steps.
🧮Exposure Value (ev) Calculator
Calculate exposure value (ev) with interactive inputs and clear steps.