Contrast Ratio Checker

A contrast ratio checker measures the luminance difference between a foreground colour (text) and a background colour, and reports whether the combination meets the WCAG accessibility guidelines. It is used by web developers, UI designers, and accessibility auditors to ensure digital content is readable for people with low vision or colour blindness.

How to Use the Contrast Ratio Checker

1. Enter the foreground (text) colour as a HEX code, RGB value, or by using the colour picker.
2. Enter the background colour in the same way.
3. Click "Check" to see the contrast ratio and which WCAG 2.1 conformance levels are met.
4. If the result fails, use the tool's suggestion feature to find the nearest passing colour variant.
5. Test multiple colour combinations to find a palette that meets accessibility standards without compromising your design.

The Formula

The WCAG 2.1 contrast ratio formula compares the relative luminance of two colours:

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

Where:

• L1 = relative luminance of the lighter colour.
• L2 = relative luminance of the darker colour.
• Relative luminance ranges from 0 (black) to 1 (white).

Calculating relative luminance from an sRGB colour:

1. Normalise each channel: R' = R/255, G' = G/255, B' = B/255.
2. Apply gamma correction to each channel:
   • If channel value <= 0.04045: linear = channel / 12.92
   • If channel value > 0.04045: linear = ((channel + 0.055) / 1.055) ^ 2.4
3. Combine channels: L = 0.2126 x R_linear + 0.7152 x G_linear + 0.0722 x B_linear

WCAG 2.1 conformance thresholds:

• Level AA (minimum): 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold).
• Level AAA (enhanced): 7:1 for normal text, 4.5:1 for large text.
• UI components and graphical objects: 3:1 minimum at Level AA.

The maximum possible contrast ratio is 21:1 (black on white). The minimum is 1:1 (identical colours).

Real-World Example

A designer wants to use light grey text (#767676) on a white background (#FFFFFF).

Step 1: Calculate luminance of #767676 (RGB: 118, 118, 118). Normalised: 118/255 = 0.463 for all channels. Gamma correction: ((0.463 + 0.055) / 1.055) ^ 2.4 = (0.491) ^ 2.4 = 0.205 Luminance: L = 0.2126(0.205) + 0.7152(0.205) + 0.0722(0.205) = 0.205

Step 2: Luminance of #FFFFFF = 1.0 (pure white).

Step 3: Contrast Ratio = (1.0 + 0.05) / (0.205 + 0.05) = 1.05 / 0.255 = 4.12:1

Result: This combination passes WCAG AA for large text (3:1 required) but fails for normal body text (4.5:1 required). The designer must darken the text, for example to #595959 (#767676 darkened), which achieves a 7:1 ratio and passes WCAG AAA.

Why Contrast Matters for Accessibility

Approximately 8% of men and 0.5% of women have some form of colour blindness, and 285 million people worldwide have some degree of visual impairment. Low contrast text is one of the most common accessibility barriers on the web. WCAG (Web Content Accessibility Guidelines) are published by the W3C and form the basis of legal accessibility requirements in the UK (Equality Act 2010), EU (European Accessibility Act), and US (ADA). Poor contrast also affects all users in bright ambient light conditions, such as reading on a phone outdoors. Meeting WCAG AA as a minimum is good practice not only for compliance but also for readability across devices, screen types, and viewing environments.

Frequently Asked Questions

What is WCAG and who needs to comply with it? WCAG (Web Content Accessibility Guidelines) is a set of technical standards published by the W3C to make web content more accessible. In the UK, public sector websites are legally required to meet WCAG 2.1 Level AA under the Public Sector Bodies Accessibility Regulations 2018. Private sector organisations are expected to comply under the Equality Act 2010's reasonable adjustments duty. WCAG 2.2 is the current version as of 2023, with WCAG 3.0 in development.

Does contrast ratio apply to images and icons as well as text? Yes. WCAG 2.1 Success Criterion 1.4.11 requires a 3:1 contrast ratio for non-text elements that convey meaning, including icons, form borders, chart elements, and other graphical components. However, decorative images and purely aesthetic elements with no informational purpose are exempt.

What is the difference between WCAG AA and AAA? Level AA is the internationally recognised minimum standard for most web content. Level AAA provides enhanced accessibility with stricter thresholds and additional requirements, targeting audiences such as people with severe cognitive impairments. Achieving AAA across an entire site is difficult and is generally not required by law; conformance is typically required at Level AA.

Can two colours with a passing contrast ratio still be hard to read? Yes. Contrast ratio measures luminance difference, not all aspects of readability. Certain colour combinations, such as blue text on red, can pass the contrast ratio test while still being difficult for people with colour blindness to distinguish. Using a colour blindness simulation tool alongside the contrast ratio checker provides a more complete accessibility assessment.

Also try these free tools:

• Colour Converter
• Colour Palette Generator
• CSS Minifier

Extended Reference Notes

The Contrast Ratio Checker validates an input against a set of rules, standards, or expected patterns and reports what it finds. Checkers are deceptively simple to use, you paste or upload an input, you read the result, but the rules a checker applies, and the limits of what a checker can know, shape the result more than users often realise. The notes below cover the assumptions and boundaries that affect the answer.

What checkers can and cannot know

A contrast ratio checker checker applies a fixed set of rules mechanically. It cannot interpret intent, infer context you did not provide, or apply judgement that the rules do not specify. This is a strength when you want a consistent, reproducible verdict, the checker applies the same rules the same way every time, and a limitation when the question is genuinely judgement-dependent. For judgement-dependent questions, use the checker as a structured starting point and apply your own reasoning to the cases it flags.

Rule coverage and edge cases

The Contrast Ratio Checker implements the rules most relevant to typical use. Standards, conventions, and best practices evolve over time, and edge cases exist that any single rule set cannot cover. When a checker disagrees with your expectation, the most useful next step is to identify which rule is producing the disagreement and whether that rule applies to your specific case. Standards bodies publish their rule sets openly; for high-stakes work, it is worth confirming the tool's implementation matches the current published standard.

Reading the output

Checkers produce output in a few common shapes: pass/fail, scored (a numeric rating), or annotated (the input with problems marked). Each shape has its own reading. Pass/fail is binary and easy to act on, but it hides partial issues. Scored outputs require you to set a threshold for what counts as acceptable. Annotated outputs are the most informative but require more reading. The Contrast Ratio Checker uses the shape that best fits the underlying question, but in every case the output is a starting point for your own assessment, not a substitute for it.

Limitations of automated checking

Three limitations apply to almost every automated checker. First, the checker can only see what you give it, if the input is incomplete or out of date, the verdict reflects that. Second, the checker does not know what you are trying to achieve; it can tell you whether the input matches the rule, not whether the input is the right input for your goal. Third, automated checkers struggle with rules that require contextual judgement, anything involving taste, appropriateness for a specific audience, or alignment with an unstated standard. For those cases, treat the checker as a first-pass filter and apply human judgement to the cases it flags.

When to escalate

For high-stakes decisions, anything with legal, financial, safety, or reputational consequences, automated checking is a starting point, not a final answer. Use the Contrast Ratio Checker to catch the common, mechanical issues, then escalate the cases it cannot resolve to a qualified human reviewer or to the authoritative source for the standard in question. The cost of escalation is small compared to the cost of acting on a mechanical verdict for a question that required judgement.

Building a check-list of common failures

As you use the Contrast Ratio Checker over time, you will start to notice recurring categories of issues the tool flags. Capture them, a short list of the four or five most common failures for the specific kind of input you work with, and the typical fix for each. Over a few months, this list becomes more valuable than the checker itself for the categories of issues that appear most often, because you can pre-empt them when you create or edit the input rather than discover them when you run the check. The checker remains useful for the long tail of less common issues, where the rules catch things you would not have remembered to look for.

Differentiating severity

A useful contrast ratio checker checker distinguishes between must-fix issues and nice-to-have issues, rather than presenting them as a flat list. Must-fix issues block the input from serving its purpose; nice-to-have issues improve quality but do not block. Reading the output with this distinction in mind changes the action: must-fix issues get addressed before the input is used; nice-to-have issues get bundled into a cleanup pass when several have accumulated. The Contrast Ratio Checker groups its output accordingly; if your workflow needs a different grouping (a hard fail on what the tool treats as nice-to-have, or vice versa), adjust the inputs or apply your own triage after the check runs.

Combining automated and manual review

The Contrast Ratio Checker catches the issues that a rule can catch; a human reviewer catches the issues that require context. Used together, the two cover more ground than either alone. The typical pattern is to run the checker first to catch the mechanical issues, then have a human reviewer focus on the cases the checker cannot judge (appropriateness for the audience, alignment with the goal, anything that requires reading between the lines). A human reviewer who can trust the checker to have caught the mechanical issues can spend their time on the contextual ones, which is where they add the most value. A checker that produces output a human reviewer can act on is worth more than one that tries to be comprehensive and buries the most important findings.