Contrast Checker
Use this Contrast Checker to validate accessibility against WCAG 2.1 standards. Build an accessible color palette with real-time preview and shade correction tools.
Related Utilities
How the Color Contrast Checker Calculates Luminance for WCAG 2.1
The mathematics behind this color contrast checker relies on the relative luminance formula defined by the W3C. To determine if a pair of colors is accessible, the tool first converts your sRGB color inputs into linear light values. This normalization process ensures that the perceived brightness of a hue is calculated independently of your monitor's gamma settings.
The formula, $L = 0.2126R + 0.7152G + 0.0722B$, represents the standard weighting of human color perception, where green contributes most substantially to brightness. Once the luminance ($L$) is calculated for both the foreground and background, the tool applies the contrast ratio formula: $(L1 + 0.05) / (L2 + 0.05)$. This calculation produces a ratio between 1:1 and 21:1, where 1:1 indicates no contrast and 21:1 represents the maximum possible contrast between black and white.
Visual Matrix Comparison for Your Accessible Color Palette
When you build a custom accessible color palette, it is not enough to test single pairs. You need to understand how every foreground color interacts with every background color in your design system. This tool provides a contrast comparison matrix that automatically highlights valid and invalid combinations based on the 4.5:1 ratio threshold required for AA compliance.
| Feature | Functionality |
|---|---|
| Matrix Input | Automatically maps every swatch in your collection |
| Compliance Flag | Identifies AA-compliant pairs in emerald text |
| Failure Alert | Marks non-compliant combinations with a bold '×' |
| Use Case | Ideal for verifying UI components, buttons, and text layers |
The matrix effectively prevents accessibility regression as your palette grows. By viewing the results in a grid, you can immediately spot which background colors are incompatible with your primary text swatches.
Configuring the Accessible Color Palette Builder
The color palette builder allows you to manage multiple swatches simultaneously for complex interface projects. You can define custom hex values and add them to your persistent list, which the system then uses to generate your final CSS or Tailwind configuration.
- Foreground Text Selection: Use the primary color picker to set your text or icon color.
- Background Layer Selection: Use the secondary picker to simulate the surface or container color.
- Swatch Management: Add new colors to the list by providing a hex code; the tool validates the format automatically before appending it to your collection.
- Automated Correction: If a selected pair fails the 4.5:1 ratio, the tool provides a suggested color adjustment, which you can apply with a single click to ensure your design meets minimum accessibility requirements.
Step-by-Step Usage of the WCAG Contrast Checker
Define Your Colors
Use the Foreground Text and Background Layer color pickers to select your initial pair. The tool calculates the ratio in real-time, displaying it as a numeric value (e.g., 12.50 : 1).
Validate Compliance
Review the accessibility badges located below the ratio display. The tool checks for Normal AA, Normal AAA, Large AA, and Large AAA standards simultaneously.
Apply Shade Correction
If the tool detects a failure, look for the alert badge. Click "Apply [hex code]" to immediately update your foreground color to a mathematically optimized shade that meets the 4.5:1 threshold.
Export Your Palette
Navigate to the bottom code generation block. Select your preferred output format—CSS, Tailwind, or JSON—to integrate the generated variables directly into your IDE.
Optimizing Palette Performance for Large Design Systems
When scaling your design system to millions of users, performance in your WCAG contrast checker workflow is paramount. The tool is designed to run all luminance and ratio math locally within your browser's memory. By avoiding server-side requests, the interface remains responsive even when you have dozens of swatches in your matrix.
To optimize, keep your palette list focused on primary and secondary brand colors rather than every possible shade. If you are handling a massive design token file, consider exporting the JSON output and using a programmatic script to validate your remaining shades. This hybrid approach ensures you maintain strict accessibility standards without manual overhead.
Quick Reference: Export Formats and Use Cases
Understanding the export formats helps you integrate the color palette builder results into your production environment efficiently. Each format is stripped of unnecessary metadata, providing only the necessary variable definitions needed for current web frameworks.
- CSS Format: Exports as standard
:rootvariables, perfect for vanilla projects or legacy systems requiring global scope definitions. - Tailwind Format: Generates a
theme.extend.colorsblock. Copy and paste this directly into your configuration file to immediately make your new accessible colors available as utility classes. - JSON Format: Provides a raw object array of your hex codes. This is useful if you are building an automated pipeline or a custom design token generator.
Practical Example: Generating a Compliant UI Set
Imagine you are designing a dashboard and your primary blue brand color ($#3b82f6$) fails against a white background ($#ffffff$). The contrast ratio is only 3.5:1, which falls short of the 4.5:1 AA requirement.
Foreground: #3b82f6
Background: #ffffff
Result: 3.5:1 (Fail)Foreground: #2563eb
Background: #ffffff
Result: 4.8:1 (Pass)By using the automated shade correction feature, the tool calculates that a slightly darker blue ($#2563eb$) restores accessibility. This allows you to maintain your brand identity while satisfying the legal and ethical requirements for users with low vision.
Technical Limitations and Best Practices
While this tool provides precise mathematical validation, always remember that color contrast is only one pillar of digital accessibility. High contrast ratios do not automatically ensure a user-friendly interface. You should also consider focus states, touch target sizes, and the use of secondary indicators like icons or underline styles.
Additionally, the "Large" text compliance standards in this WCAG contrast checker assume specific font sizes (usually 18pt or 14pt bold). If your typography is smaller than these thresholds, always prioritize the "Normal" AA or AAA standards regardless of the visual weight of your font.