WCAG Contrast Checker for AA and AAA Text Compliance
This WCAG contrast checker calculates the contrast ratio between a foreground color and a background color, then checks it against AA or AAA requirements for normal or large text. A live preview shows the text against its background to help you assess readability. Thresholds are 4.5:1 and 3:1 for AA, and 7:1 and 4.5:1 for AAA.
This WCAG contrast checker calculates the contrast ratio between a foreground color and a background color. It grades the result against WCAG AA and AAA thresholds for normal and large text, and provides a live preview so you can see the text against its background. Use it to check color contrast and get a clear result while assessing readability.
Choose whether to evaluate the colors against AA or AAA criteria, and whether the text is normal or large. For AA, the required contrast ratio is 4.5:1 for normal text and 3:1 for large text. For AAA, the thresholds are 7:1 for normal text and 4.5:1 for large text. The checker reports how the ratio compares with the selected requirement.
Foreground and background colors have different roles in the preview: the foreground is the text color, and the background is the color behind it. Checking the pair helps you assess their contrast together, rather than judging either color in isolation. The live preview offers a quick visual check alongside the ratio and grade.
The checker runs entirely in your browser, and your input is processed on your own device; no data is sent to a server. It works offline once the page has loaded, and it is free to use. Developers, designers, and DevOps engineers can use it to check color combinations against WCAG criteria and catch contrast issues before sharing or shipping an interface.
Step 1: Enter the foreground and background colors you want to check. These are the two colors the checker compares.
Step 2: Choose the criteria to evaluate. The checker grades contrast against AA or AAA thresholds for normal or large text.
Step 3: Review the contrast ratio and grade. The result shows whether the selected colors meet the chosen criteria.
Step 4: Check the live preview. Seeing the text against its background helps you judge readability at a glance.
Use case: Check whether a foreground and background color combination meets a required WCAG contrast threshold before using it in an interface.
Use case: Catch a failing color combination before it reaches a reviewer or a user, so you can assess it earlier.
Use case: Get a pass or fail result with the reason, rather than relying on a contrast ratio alone.
Use case: Use the live preview to judge how text looks against its background while checking its contrast.
Use case: Check normal and large text against AA or AAA criteria when you need to evaluate different text requirements.
Use case: Verify a proposed color combination against the thresholds your project needs to follow.