Color Contrast

The ability to read and see text is fundamental in having a site that doesn't exclude users, or make them angry. This is one of the driving forces behind keeping your text with a calculated ratio of 4.5:1 (WCAG 2.1 AA). Enter your color information below to see your current ratio between foreground and background.

Foreground input:

Background input:

Ratio 21:1

APCA L^c 106.04 / -107.88

#000000 on #ffffff This is what smaller text looks like

Luminance Contrast This is what smaller text looks like

For those wanting to stay ahead of the curve, you can use the Accessible Perceptual Contrast Algorithm (APCA - WCAG 3.0 AA). Note that this is still a release candidate and may be changing in the future. As a rough guideline, L^c 75+ is passing for body text, L^c 60+ is passing for headers and large or bold text. Anything below should be considered failing for readability.
There is a caveat though, the current implementation of APCA seems to have struggles with light foreground and dark backgrounds, because of this we have added the current value and the inverse values to help you make your decision.