WCAG Contrast Checker
Enter a foreground and background color to check in real time whether the contrast meets the WCAG 2.1 accessibility standard, with AA / AAA compliance results.
Foreground (Text)
#
Relative Luminance0.0130
Background
#
Relative Luminance1.0000
Live Preview
Large Text Aa Heading
Normal text sample: The quick brown fox jumps over the lazy dog. This is a mixed Chinese and English passage used to test contrast.
Small text sample: helper caption 12px
WCAG Compliance Check
PassAA
Normal Text
For text smaller than 18pt (24px) or smaller than 14pt (18.66px) bold
Requires: ≥ 4.5:1
PassAA
Large Text
For text ≥ 18pt (24px) or ≥ 14pt (18.66px) bold
Requires: ≥ 3:1
PassAAA
Normal Text
The highest accessibility level, for text that requires very high readability
Requires: ≥ 7:1
PassAAA
Large Text
The highest accessibility level for large text
Requires: ≥ 4.5:1
PassAA
UI Components / Graphics
For non-text interface elements such as button borders, icons, and charts
Requires: ≥ 3:1
About the WCAG Contrast Checker
The WCAG Contrast Checker is a free online accessibility testing tool that helps designers and developers verify whether the contrast between text and background in websites and apps meets the WCAG 2.1 (Web Content Accessibility Guidelines) international accessibility standard. Just enter the foreground color (text color) and the background color, and the tool calculates the contrast ratio between them in real time and gives AA and AAA pass results. It also provides a real-world text preview so you can intuitively feel the readability. Whether you are doing website color matching, mobile app interfaces or product accessibility optimization, this tool helps you quickly spot insufficient readability and improve your product's accessibility experience.
What is the WCAG contrast standard
WCAG is an international accessibility standard developed by the W3C. Its rules 1.4.3 (minimum contrast) and 1.4.6 (enhanced contrast) set explicit requirements for the contrast between text and background. Contrast is a ratio calculated from the relative luminance of two colors, ranging from 1:1 (the same color, completely unreadable) to 21:1 (black on white, the highest contrast). WCAG requires: normal text to have a contrast of at least 4.5:1 (AA level) or 7:1 (AAA level); and large text to have a contrast of at least 3:1 (AA level) or 4.5:1 (AAA level). In addition, UI components such as icons and button borders are also advised to have a contrast of no less than 3:1. This tool fully covers these rules, and a single check gives you all the compliance conclusions.
How to use the contrast checker
Using the tool is very simple. First, choose the text color in the "Foreground color" card through one of three methods: a color picker, HEX input or RGB channel input. Second, choose the background color the same way in the "Background color" card. Third, the tool calculates the contrast in real time and shows the ratio and level in the result bar at the top: green means AAA, blue means AA, orange means large text only, and red means fail. Fourth, in the "Live preview" area, check the actual readability at three sizes — large, normal and small — to intuitively judge whether the requirements are met. Fifth, in the "Compliance check" area, check the pass status of each WCAG rule, covering AA/AAA normal text, large text and UI components. Sixth, click "Copy report" to copy the current check result for archiving or sharing with team members.
Use cases for WCAG contrast
WCAG contrast checking has a very wide range of use cases. In website and application development, contrast is one of the key indicators of whether a product passes an accessibility audit, and projects in sectors such as government, finance and healthcare are usually required to reach AA level or above. In mobile UI design, low-contrast text is almost unreadable outdoors or in poor lighting, and adjusting after testing can significantly improve the experience. In brand visual design, when a primary or secondary color is used as a background paired with text, contrast testing is often needed to verify readability — avoiding a design that looks good but is actually hard to read. In addition, in data visualization, charts and maps, color contrast likewise affects the efficiency of information delivery, making WCAG testing a necessary quality-control step.
Tips for using the contrast checker
There are a few tips worth noting when using the contrast checker. First, do not look only at the number — take font size and weight into account: text at 14pt (18.66px) bold or 18pt (24px) and above is considered large text, and the standard is relaxed for it. Second, although pure black on pure white has the highest contrast, it is tiring to read for long periods; consider a slightly lighter foreground color (such as #1E1E1E) with a light gray background (such as #FAFAFA), which is both attractive and meets AAA. Third, a brand's vivid primary color often has insufficient contrast and is prone to problems when used for large background areas; look for a middle-ground color between the primary color and white, or simply use dark text. Fourth, although graphics and icons are not text, they are also advised to meet 3:1, otherwise they are almost unrecognizable to low-vision users. Fifth, color is not the only way to distinguish things — in addition to contrast, you should also convey information through aids such as icons, underlines and font weight.