ToolSahla, Tools Sahla

Color contrast and readable text

You chose light grey text on a white background for your store because it looks elegant. On your screen it looks clear, but on a phone in sunlight, or for an older customer, it may not be readable. The contrast ratio measures this with a number instead of a guess.

Published · 2 min read

What is the contrast ratio?

A number from 1:1 to 21:1 comparing the brightness of the text color with the background. 1:1 means two identical colors, and 21:1 is black on white. The WCAG accessibility guidelines ask for at least 4.5:1 for normal text at level AA, 3:1 for large text, and 7:1 for normal text at level AAA.

Worked example

Text in #0F6B5F on a #FFFFFF background: the ratio is 6.39:1. It passes AA for normal text and AAA for large text, and fails AAA for normal text, which needs 7:1.

Grey #767676 on white: 4.54:1, and it passes AA.

Grey #777777 on white: 4.48:1, and it fails, even though the two colors are nearly neighbours.

How to do it

  1. Open the Color contrast checker and enter the text color and background color as HEX, RGB or HSL.
  2. Read the ratio and the pass or fail for each level.
  3. Check the live sample in Arabic and English.
  4. If a color fails, use the suggestions: the nearest passing color on the path toward black or white.

Where to check in your store

  • Button text on the button color, especially the add-to-cart button.
  • The price and discount, the most important text on a product page.
  • Small grey text, like delivery times and the returns policy.
  • Footer links on a dark background.

What the tool does not measure

  • It compares two solid colors only, and does not check text over images or gradients.
  • Pass and fail use the exact, unrounded ratio: 4.499 shows as 4.49 and fails 4.5:1.
  • The ratio does not measure everything that affects reading, such as font weight, typeface and screen brightness.

To find the color code in your logo or product photo, use the Image color picker. To extract a full set of brand colors from an image, use the Image palette extractor extractor, then check every text color on top of them here.

Common questions

Isn't it enough that the text looks clear on my screen?

No. Your screen and your eyes are not a measure for every customer. The number gives you a fixed verdict that does not depend on one screen.

What is the difference between AA and AAA?

AA is the minimum usually required, and AAA is a higher level that is harder to reach. For normal text: 4.5:1 for AA and 7:1 for AAA.

Does the tool support transparent colors?

A translucent text color is first blended with the background, then the ratio is worked out. A translucent background is refused, because its result depends on what lies behind it.