Contrast Checker
Compute the WCAG contrast ratio between text and background colors and check AA/AAA compliance.
About this tool
The contrast checker turns the readability of a text color against a background into a number using WCAG criteria. The calculation runs in your browser and never sends your colors anywhere. Here is a quick reference for the passing thresholds, plus pitfalls that are easy to miss even when the number passes.
Passing thresholds at a glance
- Normal-size text: AA = 4.5:1 or more / AAA = 7:1 or more.
- Large text: AA = 3:1 or more / AAA = 4.5:1 or more.
- UI components like button borders, icons, and chart colors: 3:1 or more.
What counts as "large text"
WCAG treats roughly 18pt (about 24px) or larger normal text, or 14pt (about 18.66px) or larger bold text, as large text. Note that the required ratio changes with font size even for the same color pair.
Do not convey information by color alone
Even when the contrast ratio passes, conveying meaning by color alone β like "red text = error" β does not reach people who have trouble distinguishing colors. Adding non-color cues such as underlines, icons, or labels is the WCAG principle (use of color).
Judge semi-transparency by the composited color
With rgba() or semi-transparent layers, contrast is determined by the composited color actually seen on screen. Judging it while still transparent diverges from reality, so convert it to the opaque color it resolves to over its background before entering it.
How to use
- Enter the text and background colors (or use the color picker).
- The contrast ratio and a preview appear instantly.
- Check AA/AAA (normal and large) with β / β.
FAQ
Are the colors I enter sent anywhere?
No. The contrast ratio calculation runs entirely in your browser, and the color values you enter are never sent to a server.
What is the difference between AA and AAA?
Both are WCAG conformance levels, with AAA being the stricter one. For normal-size text, AA requires 4.5:1 or more and AAA requires 7:1 or more. General websites often aim to meet AA first.
How large is "large text" exactly?
WCAG considers roughly 18pt (about 24px) or larger normal text, or 14pt (about 18.66px) or larger bold text, as large text. Large text uses looser criteria than normal text: 3:1 for AA and 4.5:1 for AAA.
What color formats can I enter?
Hex notation such as #RRGGBB or #RGB, as well as forms like rgb(255, 255, 255). Specify a foreground and a background color and the ratio of that pair is computed.
What is a contrast ratio of 21:1?
It is the maximum value, obtained by pairing pure black (#000000) with pure white (#FFFFFF). 1:1 means equal brightness and no distinction, and higher values are more readable.
Is transparency (alpha) taken into account?
This tool computes the ratio of the foreground and background colors themselves. For a semi-transparent color, convert it to the opaque value it visually resolves to over its background before entering it for a more realistic judgment.