HesapHanem

Color Contrast (WCAG) Checker

How do I check color contrast?

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.03928, 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 level shown is AAA at 7:1 or more, AA at 4.5:1 or more, and otherwise a fail. The 3:1 threshold for large text is not applied. 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.
  • Expecting large-text leniency. This tool applies 4.5:1 for AA to every pair, so a heading that qualifies at 3:1 under the standard will show as a fail here.
  • 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.

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 normal-text AA and AAA accessibility thresholds — 4.5:1 for AA and 7:1 for AAA (the standard also allows a lower 3:1 bar for large text, which this tool does not apply) — to say whether a given text-and-background combination is actually readable enough to meet accessibility standards.

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