Analyze a palette with WCAG criteria
Analyze contrast between the colors in your palette and identify combinations that meet WCAG AA or AAA levels.
Palette to analyze
Contrast matrix
Primary | Secondary | Background | Text | Muted | |
|---|---|---|---|---|---|
Primary | — | 1.15 Fail | 3.68 AA-L | 3.98 AA-L | 1.29 Fail |
Secondary | 1.15 Fail | — | 4.23 AA-L | 3.45 AA-L | 1.12 Fail |
Background | 3.68 AA-L | 4.23 AA-L | — | 14.63 AAA | 4.76 AA |
Text | 3.98 AA-L | 3.45 AA-L | 14.63 AAA | — | 3.07 AA-L |
Muted | 1.29 Fail | 1.12 Fail | 4.76 AA | 3.07 AA-L | — |
WCAG 2.1 Legend
Level AAA
Ratio ≥ 7:1 - Excellence
Level AA
Ratio ≥ 4.5:1 - Standard
AA Large
Ratio ≥ 3:1 - Large text
Fail
Ratio < 3:1 - Non-compliant
Analyze contrast between the colors in your palette and identify combinations that meet WCAG AA or AAA levels.
Analyze a palette with WCAG criteria only exposes controls and results that belong to its function. Available options can vary with the tool and the input you provide.
Supported formats
How it works
Step 1
Open Analyze a palette with WCAG criteria and prepare the input requested by the interface
Step 2
Adjust the visible controls for the result you need
Step 3
Review the displayed result before copying, exporting or reusing it when that action is available
Common mistakes to avoid
- Do not assume a format or option is supported when it is not shown in the tool interface.
- Check the resulting values before reusing them in a brand system, interface or production file.
- When the result is used for text or UI components, check contrast as part of the accessibility review.
Pro tips
- Keep the source value together with the result when you need to compare variants or reproduce a setting.
- Use the formats actually shown by the tool instead of estimating a conversion yourself.
- On phones and tablets, allow labels and controls to wrap rather than forcing a fixed width.
Data handling
Data handling depends on the feature being used. Site services such as consent, analytics and account features are separate from the color operation.
What this tool does
Analyze contrast between the colors in your palette and identify combinations that meet WCAG AA or AAA levels. Analyze a palette with WCAG criteria stays focused on that task and does not imply features that are not shown in its interface. Use the controls provided for the result you need, then check the displayed values before carrying them into another tool, stylesheet, design file or document.
Prepare a usable input
Start with the kind of input requested by Analyze a palette with WCAG criteria: a color, value, image or setting depending on the screen. The formats listed for this page are Palette, HEX, CSS Variables, JSON. If a format or option is not shown in the interface, do not treat it as supported by this particular function.
Read and verify the result
Read the result in the context of the operation you performed. Compare it with the source value and review the controls that influenced the calculation. For important visual work, also inspect the result in the real interface where it will be used instead of relying on the code alone.
Use it on mobile and tablet
Analyze a palette with WCAG criteria uses the site’s responsive layout, so headings, subtitles, breadcrumbs and controls can wrap on narrower screens. This keeps longer translations readable instead of clipping them. Still review the final result in the device and context where you intend to use it.
Reuse the result in your project
After checking the result, use only the actions that Analyze a palette with WCAG criteria actually offers, such as copy or export when present. Keep the source value if you may need to reproduce the setting later. For interface work, document the color’s role and the contrast requirement that applies to it.
Related tools
Guides and tutorials
Learn how to use our tools with our detailed guides.
wcag-analyzer: practical accessibility guide
Localized guide to use wcag-analyzer, understand accessibility best practices and avoid common mistakes.
wcag-analyzer: practical accessibility guide
Localized guide to use wcag-analyzer, understand accessibility best practices and avoid common mistakes.
wcag-analyzer: practical export guide
Localized guide to use wcag-analyzer, understand export best practices and avoid common mistakes.
Frequently asked questions
Learn how to use our tools with our detailed guides.