How to use the apca contrast calculator
- Enter the text color as a hex code such as #767676 or #333.
- Enter the background color the same way.
- Read the APCA lightness contrast Lc. A positive value means dark text on a lighter background and a negative value means light text on a darker one.
- Compare the size of the number with the reading levels in the table, and look at the WCAG 2 ratio beside it.
Formula
Y = 0.2126729 R^2.4 + 0.7151522 G^2.4 + 0.072175 B^2.4, with R, G, B from 0 to 1
dark text on light: Lc = 100 x ((Y background^0.56 - Y text^0.57) x 1.14 - 0.027)
light text on dark: Lc = 100 x ((Y background^0.65 - Y text^0.62) x 1.14 + 0.027)
values very close to zero are reported as 0
Very dark colors are lifted slightly before the formula is used (Y + (0.022 - Y)^1.414 for Y below 0.022). The constants are those of APCA-W3 version 0.0.98G.
Black, white and a classic gray
Black text on a white background gives Lc 106.0, and white text on black gives -107.9. The sign is the direction, so the size is what you compare. A medium gray of #888888 on white gives 63.1.
The gray #767676 on white gives Lc 71.6, and its WCAG 2 ratio is 4.54:1, which is just above 4.5:1. White text on a blue of #1a56db gives -85.2. Note how the two methods can differ: APCA treats dark on light and light on dark differently, and it does not give the same answer for swapped colors.
How APCA differs from the WCAG 2 ratio
The WCAG 2 ratio is symmetric, so black on white and white on black score the same. Human vision does not work that way: light text on a dark background looks different from dark on light. APCA models this and also tries to account for how contrast, size and weight work together. It is a proposed method, not yet a requirement of WCAG 2.
To check a pair against WCAG 2 levels, use the Color Contrast Checker. For every pair in a palette, see the Palette Contrast Matrix, and to see colors as others see them, the Color Blindness Simulator.
Using the levels
The table lists levels commonly cited in APCA guidance, from a high level for long body text down to a low one for lines and shapes. Smaller and lighter text needs more contrast, and larger and bolder text needs less. The full lookup by font size and weight is not included, so judge the final design with real text on a real screen.
Assumptions and limits
- Colors are sRGB hex values, three or six digits, with or without the hash sign.
- The luminance uses the simple 2.4 exponent of the APCA-W3 formula, not the sRGB linear segment.
- The WCAG 2 ratio uses the standard formula with the sRGB linear segment.
- Transparency, gradients and images behind text are not handled.
- APCA is a proposal that may change, so treat the result as guidance.
Frequently asked questions
Why can Lc be negative?
The sign shows polarity. A negative Lc means light text on a darker background, and the size is what matters for comparing.
Is APCA required by accessibility law?
No. WCAG 2.x uses the contrast ratio, and APCA is a proposed method for a future version. Check which standard applies to you.
Why do my two colors give 0?
If the lightness of the two colors is nearly the same, the contrast is too low to measure and the tool reports 0.
Does font size matter?
Yes, a lot. APCA expects more contrast for small or thin text. The tool shows common levels and leaves the choice of size and weight to you.