HesapHanem

Color Contrast (WCAG) Checker

How do I check color contrast?

Result

4.54:1
AA pass
Pass
Pass
Fails
Pass

How it is calculated

Enter two hex colours, as 3 or 6 digits with or without the #. Each red, green and blue channel is divided by 255 and linearised: c / 12.92 when c is at most 0.04045, otherwise ((c + 0.055) / 1.055)^2.4. Relative luminance is L = 0.2126 R + 0.7152 G + 0.0722 B. The ratio is (Llighter + 0.05) / (Ldarker + 0.05), so it does not matter which colour is the text.

The tool then shows four checks from WCAG 2.2: AA for normal text (4.5:1), AA for large text (3:1), AAA for normal text (7:1) and AAA for large text (4.5:1), each as Pass or Fails, plus one summary level: AAA pass at 7:1 or more, AA pass at 4.5:1 or more, “AA (large text only)” from 3:1 and otherwise a fail. Large text is 18 pt or 14 pt bold and above. An invalid code, such as a non-hex letter or a wrong digit count, returns an “Invalid color code” message instead of a ratio.

Worked example

Grey #767676 on white #ffffff. The grey channel is 118/255 = 0.4627, which linearises to ((0.4627 + 0.055) / 1.055)^2.4 = 0.1812, so L = 0.1812. White has L = 1. The ratio is (1 + 0.05) / (0.1812 + 0.05) = 1.05 / 0.2312 = 4.54. That clears 4.5 but not 7, so the result is 4.54:1 with an AA pass.

Try this example →

Common mistakes

  • Judging by eye. #777777 on white gives 4.48:1 and fails, while #767676 gives 4.54:1 and passes, though the two greys look identical.
  • Assuming a mid-tone brand blue is safe on white. #1a73e8 reaches only 4.51:1, barely over the AA line, and any lighter shade fails.
  • Applying the large-text row to body copy. The 3:1 and 4.5:1 allowances are only for text of 18 pt or larger, or 14 pt bold; ordinary paragraphs need the normal-text rows.
  • Typing a colour name or an rgb() value. Only 3- or 6-digit hex codes are accepted, and anything else returns the invalid message.
  • Forgetting that a 3-digit code doubles each digit: #f80 means #ff8800, not #0f0800.

Sources

About this calculator

This tool calculates the WCAG contrast ratio between a foreground and background color, a value from 1:1 (identical colors, no contrast) up to 21:1 (pure black on pure white), computed from each color's relative luminance. It then checks that ratio against the AA and AAA accessibility thresholds for both normal and large text — AA needs 4.5:1 (3:1 for large text) and AAA needs 7:1 (4.5:1 for large text) — to say whether a given text-and-background combination is actually readable enough to meet accessibility standards. Large text means 18 pt or larger, or 14 pt bold.

It is used by web designers and front-end developers checking a color palette before shipping it, since low-contrast text is one of the most common accessibility complaints and can fail legal accessibility requirements in some jurisdictions. Accessibility auditors also use this same calculation when reviewing a website or app for WCAG compliance, and design systems often bake AA-passing color pairs directly into their component libraries to avoid the problem entirely.

Was this helpful?

You can pick up to 3 reactions.

Comments (1)

  • Editorial team

    The verdict here only knows two bars, 4.5 for AA and 7 for AAA, so a pair that lands at 3.03 shows as failing even though a ratio of 3 is the usual bar for large headings and for icons or input borders. Treat the ratio as the real answer and decide the level yourself. Also test the worst spot when text sits on a gradient or photo. Which colour pair were you trying to rescue?

Popular calculators

Loan Calculator

Monthly payment, total interest and full amortization schedule.

Percentage Calculator

Percent change, percent of, and ratio calculations.

Discount Calculator

Calculate final price, savings, and discount amount.

BMI Calculator

Body mass index from height and weight (metric or imperial).

Age Calculator

Compute your exact age in years, months and days from a birth date.

Compound Interest Calculator

Calculate the final amount and interest earned with compounding.

All Calculators