Brand Color Accessibility Checker

AA is the legal baseline — required in most accessibility regulations and referenced in ADA technical standards. AA thresholds are 4.5:1 for normal text and 3:1 for large text. AAA raises those to 7:1 and 4.5:1. WCAG itself notes that AAA conformance for all content is not always possible; it is most commonly required for government and healthcare platforms serving users with severe visual impairments.

The role assignment panel shows which of your palette colors is most versatile for text. If the primary brand color fails, use it for decorative elements, borders, or large-scale backgrounds where the contrast threshold is lower (3:1 for large text). Identify a darker shade of the same hue — or an existing neutral in the palette — that meets 4.5:1 for body text use.

The tool accepts 6-digit hex values (#RRGGBB). Transparency is not evaluated because WCAG contrast is defined for opaque colors — a semi-transparent foreground on a background requires knowing the exact background to compute the real contrast. Convert RGBA to its opaque equivalent first using the formula: final_channel = alpha × foreground_channel + (1 - alpha) × background_channel for each RGB channel.

Yes — WCAG 1.4.11 (Non-text Contrast) requires 3:1 contrast for UI components and graphical elements, which is the same threshold as large text. The matrix shows which pairs meet 3:1 and which meet 4.5:1, so you can apply the appropriate threshold to text vs. icon use cases from the same view.

The tool supports 2 to 8 colors per session. Two is the minimum required for any contrast pair; eight covers any real-world brand palette. For each color added, the contrast matrix adds one row and one column — at 8 colors, the full matrix evaluates 56 unique foreground/background combinations.

No. All calculations — contrast ratios, harmony analysis, and color role assignment — run entirely in your browser's JavaScript engine using the WCAG luminance formula. Nothing is sent to a server. Closing or refreshing the tab removes every trace of the colors you entered.

Click "Copy CSS variables" to copy the role assignments as CSS custom property declarations (--color-primary, --color-secondary, --color-accent, --color-neutral) ready to paste into a stylesheet or design token file. Individual contrast ratios shown in the matrix can be transcribed into a compliance report or accessibility audit document.