How does the tool assign Primary, Secondary, Accent, and Neutral roles?

Primary is the color with the highest average contrast versatility — the mean of its contrast ratio against pure white and pure black. High versatility means the color works for text on both light and dark backgrounds. Secondary is second-highest versatility. Accent is the most saturated color in HSL space (naturally draws attention). Neutral is the least saturated (suits backgrounds and borders).

What color formats does the tool accept?

The tool accepts 6-digit hex color values in #RRGGBB format. The # prefix is required. Each color chip also has a native color picker you can click to select a color visually — the hex value updates automatically from the picker.

Does the tool send my colors to a server?

No. All WCAG calculations, harmony analysis, and role assignment run client-side in JavaScript. Nothing is transmitted to a server.

Yes — completely free. No account required, no file upload, nothing stored.

Is this the same as a "color palette checker" or "color palette fixer"?

Yes — the Brand Color Accessibility Checker is a free color palette checker and color palette fixer in one. It checks every color combination in your palette for WCAG AA and AAA compliance, showing exactly which pairs fail and need adjusting. It also analyzes color harmony and assigns Primary, Secondary, Accent, and Neutral roles with a CSS export. Edit any hex input live and the matrix updates instantly — the checking and fixing happen in the same screen, no separate tool needed.

Home › Tools › Image Processing › Brand Color Accessibility Checker

Brand Color Accessibility Checker

Q: What contrast ratio is required to pass WCAG AA?

WCAG AA requires at least 4.5:1 for normal-weight text below 18pt, and at least 3:1 for large text (18pt regular or 14pt bold). UI components require 3:1 against adjacent colors. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. This tool shows the ratio and pass/fail for both thresholds across every combination.

Paste in your brand colors and instantly see which combinations pass WCAG AA and AAA contrast, how they work together as a palette, and which role each color should play — primary, accent, or neutral. Free, runs entirely in your browser, no file uploads.

Your colors

Harmony

Contrast matrix

Color roles

About Brand Color Accessibility Checker

This free browser-based tool combines three color audits in one workflow: WCAG 2.1 contrast compliance, color harmony analysis, and semantic role assignment. Paste in 2–8 hex color values and the tool instantly shows you which foreground/background pairs pass AA or AAA accessibility requirements, how your palette relates harmonically, and which role each color is best suited to play in your design system.

All calculations run client-side — nothing is sent to a server, no account is required, and no data is retained. The WCAG contrast formula uses the exact relative luminance calculation specified in WCAG 2.1 Success Criterion 1.4.3. AA thresholds: 4.5:1 for normal text, 3:1 for large text. AAA thresholds: 7:1 for normal text, 4.5:1 for large text.

How role assignment works

Primary — the color with the highest average contrast versatility (mean of contrast ratio against white and black). A high average means the color can carry text in both light and dark contexts. Secondary — second-highest versatility. Accent — the most saturated color in HSL space; naturally draws attention and suits CTAs or interactive states. Neutral — the least saturated color; suits backgrounds, borders, and supporting text.

Frequently asked questions

What is WCAG color contrast and why does it matter for brand design?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between foreground text and background colors so that people with low vision or color blindness can read content. The AA standard requires a 4.5:1 ratio for normal text and 3:1 for large text (18pt+ regular or 14pt+ bold). For brand design, this matters because a palette that fails contrast requirements cannot be used for body text or interface labels without modification — choosing accessible colors from the start avoids maintaining separate "accessible" and "brand" variants.

What contrast ratio is required to pass WCAG AA?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal-weight text below 18pt (24px), and at least 3:1 for large text — defined as 18pt (24px) regular weight or 14pt (approximately 18.67px) bold. UI components and graphical elements require a minimum 3:1 ratio against adjacent colors. WCAG AAA, the enhanced standard, requires 7:1 for normal text and 4.5:1 for large text. This tool shows the ratio and pass/fail status for all three thresholds across every combination in your palette.

Keep going

More image tools

LiveImage Processing

Color Picker

Pick any color with a native browser dialog and instantly get the HEX, RGB, and HSL values. Keeps a recent-colors history.

Open tool

LiveImage Processing

Hex to RGB Color Converter

Convert between HEX, RGB, and HSL color formats in any direction. All three update live as you type.

Open tool

LiveImage Processing

Invert Colors

Invert the colors of any image online. Free, no signup, download result in seconds.

Open tool

LiveImage Processing

Remove Background

Remove solid-color backgrounds from product photos and graphics. Free, server-side processing.

Open tool