DOFIW COLOR ACCESSIBILITY TOOLS
Color Palette Accessibility Checker
Check every color pair in a palette against WCAG text contrast thresholds. Find usable combinations, identify failures, and export the results without uploading your colors.
Build your color palette
Review accessible combinations
Contrast matrix
Rows are previewed as text and columns as backgrounds. The ratio is identical when the roles are reversed.
HOW TO USE IT
Evaluate a palette in three steps
- Add and name your colors. Use the visual picker or enter a 3-digit or 6-digit HEX value.
- Analyze the palette. Dofiw calculates the WCAG contrast ratio for every unique pair.
- Choose a requirement. Filter the results for AA or AAA and normal or large text.
Inputs
Between 2 and 12 named HEX colors. Names help identify design tokens such as Primary, Surface, or Body Text.
Outputs
Exact ratios, pass-or-fail results, live pair previews, a matrix, and a downloadable CSV report.
UNDERSTAND THE RESULTS
One palette can contain both safe and unsafe pairs
A color is not accessible or inaccessible by itself. Accessibility depends on the color it is paired with, the text size, and the required WCAG level. A light brand color may work well with dark text while failing completely with white text.
The matrix helps reveal reusable relationships. A pair passing at 4.5:1 can support normal AA text and large AAA text. A pair between 3:1 and 4.49:1 is limited to large AA text.
PRACTICAL USES
When to check an entire palette
Design tokens
Check text and surface tokens before releasing a design system.
WordPress themes
Review theme colors for headings, paragraphs, menus, buttons, cards, and footers.
Brand guidelines
Document which brand combinations are suitable for readable text.
Developer handoff
Export a CSV containing exact ratios and threshold results.
LIMITATIONS
What this checker does not test
- Gradients, images, videos, patterns, and colors that change dynamically.
- Opacity or layered transparency in the current version.
- Non-text contrast for controls, icons, focus indicators, and charts.
- Whether color is being used as the only way to communicate information.
- Complete WCAG conformance or legal compliance.
PRIVACY
Your palette remains on your device
All calculations run locally in your browser. Color values and names are not uploaded, stored in a database, or sent to an API. The CSV file is generated directly on your device.
FREQUENTLY ASKED QUESTIONS
Questions about accessible palettes
Why are reversed color pairs not counted twice?
The WCAG contrast ratio is mathematically identical when foreground and background colors are reversed. The table lists each unique pair once, while the matrix previews both visual directions.
How many colors can I test?
This version supports 2–12 colors. Twelve colors produce 66 unique comparisons, which remains practical to inspect.
Does every palette color need to work with every other color?
No. A useful design system documents permitted roles and combinations. Decorative colors do not necessarily need to serve as text colors.
What should I do with a failing pair?
Change one color, reserve the pair for non-text use where appropriate, or select another documented text or surface token.
Does a passing palette make a website accessible?
No. This tool evaluates selected text contrast thresholds only. Accessibility also involves semantics, keyboard use, focus, labels, alternative text, reflow, and human evaluation.
This checker is an educational testing aid. It does not guarantee WCAG conformance or legal compliance. Read the WCAG contrast guidance.