Launch QA
Check core interface colors before a page or redesign ships.
Documentation
Accessibility Contrast Checker documentation
Review WCAG contrast ratios, APCA guidance, and live text or button previews before a page goes live.
Overview
Use it when the format needs to change, not the meaning
Use Accessibility Contrast Checker when launch QA needs a quick read on whether text, links, or buttons are easy enough to read.
Palette review
Compare softer brand colors against body text and CTA states.
Imported page audit
Pull theme suggestions from a live page and test them in one place.
Supported inputs
Bring clean source text and keep the direction straight
- Accepts solid hex colors for the page surface, body text, links, and button colors.
- Sample copy, font size, and font weight help you test realistic reading conditions.
- A public page URL can be imported for palette suggestions from theme tags, inline CSS, and same-host stylesheets.
Walk through it
Follow the same sequence you see in the tool
Workflow
Test a palette manually
Use this flow when you already know the colors you want to review.
- Enter the surface, text, link, and button colors.
- Adjust the sample text, font size, or weight to match the intended design.
- Review the WCAG states, APCA guidance, and live preview before you keep the pair.
Workflow
Import palette suggestions from a live page
Use this flow when you want candidate colors from an existing page before testing them.
- Paste a public page URL into the import helper.
- Review the suggested surface, text, and accent colors.
- Apply the suggestions you want to test, then run the contrast check again.
What you get
Check the result before you copy it into the next step
WCAG pass states
See whether each pair clears normal and large text targets quickly.
APCA guidance
A secondary score helps you judge readability beyond a single ratio.
Live preview surface
Paragraph text, a link, and a button show how the colors actually feel together.
Avoid these mistakes
Small input problems create the biggest conversion errors
Trusting one badge only
Check the live preview and the large-text states, not just one ratio.
Ignoring link visibility
Make sure links stand out clearly from surrounding text.
Importing private URLs
Use public pages only so the tool can fetch them safely.
Glossary
Decode the terms before you act on them
This section translates the most technical labels on the page into plain language so you can interpret the output without opening another tab.
WCAG
WCAG is the Web Content Accessibility Guidelines standard. In this tool it is the source of the familiar contrast pass and fail thresholds.
Contrast ratio
Contrast ratio measures the difference in luminance between two colors. Higher ratios usually make text easier to read.
APCA
APCA is a newer readability model that estimates how readable a color pair feels in practice, especially for different text sizes and weights.
Large text
Large text is text that is big or bold enough to qualify for WCAG’s less strict contrast threshold.