ToolwebHow to use this tool
- Enter text and background colors as HEX, RGB or HSL.
- If the background is translucent, specify its opaque canvas in More options.
- Read the ratio, normal/large AA/AAA decisions and text preview together.
Maximum black/white contrast
- Input and settings
- Text #000000; background #FFFFFF
- Result
- 21.000:1; normal and large text pass AA and AAA
Using the same color for both inputs gives a ratio of 1:1.
Match the threshold to the text
Relative luminance is computed from sRGB channels and used to form the contrast ratio. Normal text is compared against 4.5:1 for AA, and large text against 3:1; AAA uses 7:1 and 4.5:1 respectively.
The usual large-text definition is at least 24 CSS px, or about 18.67 px when bold. Displayed ratios are rounded, but pass/fail uses the unrounded value, so do not infer a borderline decision from the displayed digits alone.
Compositing and the scope of this check
A translucent background is composited over the selected canvas first, then the text over that result. Translucent black text can appear lighter and have less contrast than opaque black. A translucent canvas is rejected because its final backing is unspecified.
Images, gradients, blend modes, shadows, font rendering and interaction states are not modeled. Checking this one color pair does not establish whole-site WCAG conformance or readability for every user.
Common questions
What is the larger preview text for?
It lets you compare the same colors at another size. Review the actual typeface, size and weight used in your product separately.
Does swapping the colors change the ratio?
For two opaque colors it does not. With transparency, changing the compositing order can change the result.