HesapHanem

Color Contrast Ratio Calculator

Check the contrast ratio of two colors for accessibility.

How it is calculated

Each colour is converted to a relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B, where each channel is first scaled to 0 to 1 and linearised (values up to 0.04045 are divided by 12.92, others use ((c + 0.055) / 1.055)2.4). The contrast ratio is (Llight + 0.05) / (Ldark + 0.05), from 1 : 1 to 21 : 1. The order of the two colours does not matter. The tool then labels the ratio using the WCAG limits: 7 or more for AAA, 4.5 or more for AA, 3 or more for large text only, and below 3 fails. Colours must be 3 or 6 digit hex codes, with or without #.

Worked example

Grey text #767676 on white #ffffff. The grey channel is 118/255 = 0.463, which linearises to about 0.181, so L = 0.181. White has L = 1. Ratio = (1 + 0.05) / (0.181 + 0.05) = 1.05 / 0.231. The tool shows 4.54 : 1 with the result Passes AA, just above the 4.5 limit for normal body text.

Try this example →

Common mistakes

  • Judging by eye on your own screen. Brightness, glare and eyesight differ, and the ratio gives an objective check.
  • Applying the 3 : 1 large-text limit to normal body text, which needs 4.5 : 1 for AA.
  • Checking only the default state and forgetting hover, focus, disabled text and text over images.
  • Entering a colour with a typo, or a name like red; the tool needs hex codes.
  • Assuming a pass guarantees readability. Font size, weight and thin strokes still matter.

Sources

About this calculator

This calculator computes the WCAG contrast ratio between two colors using (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors, each derived from the sRGB channel values via the WCAG's gamma-corrected luminance formula. The result ranges from 1:1 (identical colors) to 21:1 (pure black on white), and is checked against the Web Content Accessibility Guidelines thresholds — 4.5:1 for normal text and 3:1 for large text at AA level, 7:1 and 4.5:1 respectively for the stricter AAA level.

Web designers, front-end developers, and accessibility auditors use this to ensure text and UI elements meet legal and usability accessibility standards (WCAG 2.1, ADA, Section 508 compliance) for users with low vision or color blindness.

Was this helpful?

You can pick up to 3 reactions.

Comments (1)

  • Editorial team

    The ratio compares two flat colors, so it cannot judge text sitting on a gradient, a photo or a semi-transparent layer. In those cases pick the lightest and darkest spots behind the words and test each pair, since the worst one decides. Colors must be entered as hex codes here, so convert named or rgb values first. Which color pairs from your palette keep failing, and which pass only for large text?

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