Accessibility Color Contrast Checker
Check foreground and background color combinations against WCAG 2.1 contrast ratio requirements for AA and AAA compliance.
About This Tool
The Accessibility Color Contrast Checker is a free browser-based tool that evaluates the contrast ratio between a foreground (text) color and a background color according to the Web Content Accessibility Guidelines (WCAG) 2.1. Ensuring adequate color contrast is one of the most impactful steps you can take to make your website usable for people with visual impairments, including low vision and color blindness.
The tool calculates the relative luminance of each color using the sRGB color space formula defined in WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) and Success Criterion 1.4.6 (Contrast Enhanced). It then computes the contrast ratio and tests it against four thresholds: AA Normal Text (4.5:1), AA Large Text (3:1), AAA Normal Text (7:1), and AAA Large Text (4.5:1). Large text is defined as 18px bold or 24px regular and above.
You can enter colors using HEX codes, RGB values, or the native color picker. The tool provides a real-time live preview showing sample text at 14px, 18px, and 24px so you can see exactly how your color pair looks at different sizes. If your color combination fails the AA Normal Text threshold, the tool suggests the nearest passing foreground color by adjusting lightness.
If you need to convert between color formats before testing, try the Color Converter. For generating CSS gradients with accessible color stops, the CSS Gradient Generator can help. Developers working with Tailwind CSS can use the Tailwind CSS Converter to map accessible colors to utility classes.
All processing runs entirely in your browser using JavaScript. No color data is sent to any server, making it safe to test proprietary brand colors and design system tokens without any privacy concerns.
How to Use
- Enter a foreground (text) color using the color picker, HEX input, or RGB fields on the left panel.
- Enter a background color using the color picker, HEX input, or RGB fields on the right panel.
- The contrast ratio updates in real time in the center display, along with Pass/Fail badges for each WCAG level.
- Review the Live Preview section to see sample text at 14px, 18px, and 24px rendered with your selected colors.
- If the combination fails, check the Suggestion box for a recommended foreground color that meets AA Normal Text (4.5:1).
- Click Swap Colors to reverse the foreground and background and test the inverse combination.
- Click Copy Results or press Ctrl+Shift+C to copy the full contrast report (ratio, Pass/Fail for all levels) to your clipboard.
Popular Accessibility Color Checker Examples
FAQ
What is a WCAG color contrast ratio?
The WCAG contrast ratio is a measure of the perceived luminance difference between two colors. It is calculated using the relative luminance formula from the WCAG 2.1 specification. A ratio of 1:1 means no contrast (identical colors), while 21:1 is the maximum (black on white). Higher ratios mean better readability.
What is the difference between WCAG AA and AAA?
WCAG AA is the minimum recommended level for most web content. It requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA is a stricter, enhanced level that requires 7:1 for normal text and 4.5:1 for large text. While AAA provides the best readability, AA is considered the practical standard for most websites.
What counts as large text in WCAG?
Large text is defined as text that is at least 18 point (24px) at regular weight, or at least 14 point (18.66px, approximately 18px) at bold weight. Large text has lower contrast requirements because its larger visual presentation makes it inherently more readable.
How does the color suggestion work?
When your foreground/background pair fails the AA Normal Text requirement (4.5:1), the tool adjusts the foreground color's lightness incrementally until it finds the nearest color that meets the threshold. If the background is light, it darkens the foreground; if the background is dark, it lightens the foreground. The suggested color preserves the general hue of your original choice.
Does this tool support WCAG 2.2 or WCAG 3.0?
This tool implements the contrast algorithm from WCAG 2.1, which is the same algorithm used in WCAG 2.2. WCAG 3.0 (still in draft) proposes a new APCA (Advanced Perceptual Contrast Algorithm) which may be added in the future. For current legal and compliance purposes, WCAG 2.1 AA is the standard referenced by most accessibility regulations.
Is my data safe?
Yes. All contrast calculations run entirely in your browser using JavaScript. No color values are sent to any server. There are no API calls, no logging, and no third-party services involved. You can verify this by checking the Network tab in your browser's developer tools.
Can I test more than two colors at once?
This tool tests one foreground/background pair at a time. For comprehensive design system audits, test each text color against every background it will appear on. Use the Swap Colors button to quickly check the inverse combination. You can also copy results for each pair to build a full contrast matrix.
Related Tools
Color Converter
Convert colors between HEX, RGB, HSL formats with contrast checker and palette generator.
px ↔ rem Converter
Convert between px, rem, and em CSS units with a configurable base font size and quick-reference table.
Tailwind CSS Converter
Convert plain CSS to Tailwind CSS utility classes. Paste CSS rules and get equivalent Tailwind classes instantly.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients visually with color stops, angle control, and live preview.
Color Palette Extractor
Extract dominant color palettes from images with HEX, RGB, HSL values. Export as CSS variables, Tailwind config, JSON, or SVG.
Accessibility Audit Checklist
Interactive WCAG 2.1 compliance checklist organized by level (A, AA, AAA) and category with progress tracking and exportable audit reports.