Categories

← View All Tools

Accessible Color Palette Contrast Checker

Audit every color pair in a palette against WCAG 2.1 AA and AAA contrast thresholds and suggest adjustments

Example Results

1 examples

Audit a brand palette for WCAG AA

Check all foreground/background combinations and suggest which brand colors need darkening

{
  "summary": {
    "colorCount": 4,
    "combinationCount": 12,
    "failingCount": 4
  },
  "recommendations": [
    {
      "pair": "brand-secondary on surface"
    }
  ]
}
View input parameters
{ "paletteInput": "brand-primary: #2563EB\nbrand-secondary: #F59E0B\nsurface: #FFFFFF\ntext: #111827", "minimumTarget": "aa", "includeSelfPairs": false }

Key Facts

Category
Design
Input Types
textarea, select, checkbox
Output Type
json
Sample Coverage
4
API Ready
Yes

Overview

The Accessible Color Palette Contrast Checker is a specialized design utility that audits every color combination within a palette against WCAG 2.1 accessibility standards. By inputting a list of brand or UI colors, designers and developers can instantly identify which foreground and background pairings fail AA or AAA contrast thresholds and receive actionable recommendations for adjustments.

When to Use

  • •When establishing a new design system and needing to verify that all foundational colors meet accessibility guidelines.
  • •When auditing an existing brand palette to identify non-compliant text and background color combinations.
  • •When preparing UI themes, such as light and dark modes, to ensure sufficient contrast for visually impaired users.

How It Works

  • •Paste your color palette into the text area using a simple 'name: #hex' format.
  • •Select your desired WCAG compliance target, such as AA Normal Text (4.5:1) or AAA Large Text (4.5:1).
  • •Choose whether to evaluate identical color pairs against each other.
  • •Review the generated JSON report detailing passing pairs, failing combinations, and suggested adjustments.

Use Cases

Auditing a corporate brand guideline document to ensure marketing materials are accessible.
Validating a web application's CSS variables before deploying a new user interface theme.
Generating an accessibility compliance report for a client's digital design system.

Examples

1. Auditing a Brand Palette for WCAG AA

UI/UX Designer
Background
A designer is finalizing a new brand identity and needs to ensure the primary colors are legible on standard backgrounds.
Problem
Manually checking every combination of brand colors against white and dark gray backgrounds is tedious and prone to human error.
How to Use
Paste the brand colors into the Palette Colors input and set the WCAG Target to 'AA Normal Text (4.5:1)'.
Example Config
brand-primary: #2563EB
brand-secondary: #F59E0B
surface: #FFFFFF
text: #111827
Outcome
The tool outputs a JSON report showing 12 total combinations, identifying that 'brand-secondary on surface' fails, and suggests darkening the secondary color.

2. Strict AAA Compliance for Government Portal

Frontend Developer
Background
A developer is building a government website that legally requires strict WCAG AAA compliance for all text elements.
Problem
Need to verify that the chosen text colors have a contrast ratio of at least 7:1 against all container backgrounds.
How to Use
Input the text and background hex codes, select 'AAA Normal Text (7:1)' as the target, and run the audit.
Example Config
text-main: #333333
text-muted: #666666
bg-light: #F8F9FA
bg-dark: #212529
Outcome
The report highlights that 'text-muted on bg-light' fails the 7:1 ratio, prompting the developer to use a darker gray to meet the AAA standard.

Try with Samples

design
Color Code Samples
Collection of color codes in various formats (Hex, RGB, HSL, named colors) for validation testing
title token color
sample
Storybook Samples
Comprehensive Storybook examples for component development, testing, documentation, and design system management
keywords design,system
sample
Path Analyzer Samples
Comprehensive collection of file system paths from Windows, Linux, and macOS for path analysis and testing
task analyze
sample
SVG Samples
Scalable Vector Graphics (SVG) samples demonstrating various SVG features and techniques
keywords design
sample

Related Hubs

Design Convert Tools
Explore 98 design tools for convert workflows and compare closely related utilities quickly.
Design Generate Tools
Explore 19 design tools for generate workflows and compare closely related utilities quickly.
Validation Validate Tools
Explore 16 validation tools for validate workflows and compare closely related utilities quickly.

FAQ

What WCAG standards does this tool support?

It supports WCAG 2.1 AA and AAA contrast thresholds for both normal and large text sizes.

How should I format my color inputs?

Enter one color per line in the format 'name: #hexcode', for example, 'surface: #FFFFFF'.

What does the tool output?

It generates a JSON report summarizing the total combinations, the number of failing pairs, and specific recommendations for improvement.

Can I check AAA compliance for large text?

Yes, you can select 'AAA Large Text (4.5:1)' from the WCAG Target dropdown menu.

Does it suggest how to fix failing colors?

Yes, the output includes recommendations on which colors in a failing pair need to be darkened or lightened to meet the selected threshold.

API Documentation

Request Endpoint

POST /en/api/tools/accessible-color-palette-contrast-checker

Request Parameters

Parameter Name Type Required Description
paletteInput textarea Yes -
minimumTarget select No -
includeSelfPairs checkbox No -

Response Format

{
  "key": {...},
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
JSON Data: JSON Data

AI MCP Documentation

Add this tool to your MCP server configuration: 

{
  "mcpServers": {
    "elysiatools-accessible-color-palette-contrast-checker": {
      "name": "accessible-color-palette-contrast-checker",
      "description": "Audit every color pair in a palette against WCAG 2.1 AA and AAA contrast thresholds and suggest adjustments",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessible-color-palette-contrast-checker",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

You can chain multiple tools, e.g.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 tools.

If you encounter any issues, please contact us at [email protected]