Tool · Color and contrast

Contrast lab: test a text and background pair

Dashboards use color to say things quickly: a rising line, a falling total, a warning band. Those colors have to be readable before they can be useful. Mix a text color and a background color below. The ratio updates as you move the controls, and each threshold reports pass or fail in words.

Mix the pair

The mixer, its presets, and its buttons need JavaScript. Without it, the results on this page describe the starting pair: ink text on paper. That pair meets every threshold listed below.

Preview

Sample label

A heading set in this pair

Body text sample. A sentence like this one is where small differences in contrast become tiring, so read it at the size you would use on a real screen.

Large text sample

Rising Falling Flat

Outlined control

Results

Contrast ratio: 13.54 to 1

Normal text Needs 4.5 to 1
Pass
Large text Needs 3 to 1
Pass
Graphics and control outlines Needs 3 to 1
Pass
Enhanced normal text Needs 7 to 1
Pass

How the ratio is worked out

The Web Content Accessibility Guidelines define contrast in three steps. Each color is converted from the sRGB values on screen into linear light. The three channels are then weighted to match how the eye responds to them, with green counting most, red less, and blue least. The lighter color's luminance, with 0.05 added, is divided by the darker color's luminance, also with 0.05 added.

The result runs from 1 to 1, where two identical colors meet, up to 21 to 1, where black meets white. The thresholds are minimums. A pair that reaches 4.5 to 1 is not automatically comfortable at small sizes, in dim rooms, or on a poor screen. Treat the ratio as the floor for your reading, not the goal.

The adjust button moves the text color in small steps toward black or toward white, and stops at the first step that reaches 4.5 to 1 for normal text. It keeps the hue as close as it can, and it leaves the background untouched.