Live
Map Collections
Curated collections
A curated directory of public Google Maps saved lists from locals, travelers, and digital nomads. Filter by country, city, and theme to find places worth saving.
Open
WCAG Color Contrast Checker
Pick any two colors and instantly see if they meet accessibility law standards (WCAG AA/AAA). Visualize how color-blind users see your palette, and get one-click fix suggestions.
Example combinations
Large heading text (18pt bold)
The quick brown fox jumps over the lazy dog. Normal body copy at 16px.
Small caption text at 12px — the hardest to read.
17.06
Contrast ratio
AAA — Excellent
WCAG AAPass
Normal text (< 18pt / < 14pt bold)
4.5:1
WCAG AAAPass
Normal text (< 18pt / < 14pt bold)
7:1
WCAG AAPass
Large text (≥ 18pt or ≥ 14pt bold)
3:1
WCAG AAAPass
Large text (≥ 18pt or ≥ 14pt bold)
4.5:1
WCAG 2.1 requires 4.5:1 (AA) or 7:1 (AAA) for normal text, and 3:1 (AA) or 4.5:1 (AAA) for large text (≥ 18pt regular or ≥ 14pt bold). AA is the legal minimum in most jurisdictions.
Color blindness simulation
Aa 123
Normal vision
17.1:1
Aa 123
Protanopia (red-blind)
16.8:1
Aa 123
Deuteranopia (green-blind)
17.2:1
Aa 123
Tritanopia (blue-blind)
16.9:1
Aa 123
Achromatopsia (no color)
17.0:1
Simulations use the Machado 2009 model (severity 1.0) applied in linear sRGB. Affects ~8% of males (protanopia + deuteranopia combined).
The Color Contrast Checker tests any two colors against the WCAG 2.1 AA and AAA accessibility thresholds for normal and large text. Paste hex codes or pick visually; the tool returns the exact contrast ratio, a pass/fail badge per WCAG level, and color-blindness simulations using the Machado 2009 model for protanopia, deuteranopia, tritanopia, and achromatopsia. When a pair fails, click Auto-fix and the tool nudges foreground or background to the minimum change needed to pass — preserving hue intent where it can. Useful for design-system audits, accessibility reviews before shipping, and quick checks during component work. All computation happens locally in your browser.
Frequently Asked Questions
- What is a contrast ratio and how is it calculated?
- Contrast ratio is a numerical measure of the luminance difference between two colors, as defined by WCAG 2.1. It ranges from 1:1 (identical colors, zero contrast) to 21:1 (pure black on pure white). The formula is (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors respectively.
- What is the difference between WCAG AA and AAA?
- WCAG AA is the legal minimum for digital accessibility in most countries — it requires 4.5:1 contrast for normal text and 3:1 for large text. WCAG AAA is the enhanced standard, requiring 7:1 for normal text and 4.5:1 for large text. It is ideal for audiences with low vision or reading difficulties. Most compliance laws mandate AA; AAA is a best-practice target.
- What qualifies as "large text" under WCAG?
- WCAG defines large text as 18pt (24px) or larger at normal weight, or 14pt (approximately 18.67px) or larger at bold weight. Because larger text is inherently easier to read at lower contrast, WCAG applies a lower threshold. Anything below these sizes must meet the stricter 4.5:1 (AA) or 7:1 (AAA) standard.
- Why do color-blind simulations show different contrast ratios?
- Color blindness simulations transform your colors through a perceptual model (Machado 2009, severity 1.0) applied in linear sRGB space. The resulting simulated RGB values can have different relative luminances than the originals, which changes the computed contrast ratio. A pair that passes WCAG AA for normal vision may fall short for protanopic or deuteranopic users — this tool surfaces those gaps.
- Does this tool send my color data anywhere?
- No. Every calculation — contrast ratio, WCAG badge evaluation, color-blindness simulation, and fix suggestions — runs entirely in your browser via JavaScript. No color values are ever transmitted to AppicLab servers or any third party.
- How do I use the auto-fix suggestions?
- When your color pair fails WCAG AA, the suggestion panel shows the smallest lightness adjustment to either the text or background color that achieves the target ratio while preserving the original hue and saturation. Click "Apply" to preview it live, or copy the hex code directly. Hit the dice icon to randomize a brand-new passing palette.
- Can failing color contrast result in a fine or lawsuit?
- Yes. In the United States the ADA (Americans with Disabilities Act) has been applied to websites, and businesses have faced lawsuits — including federal court cases — for inaccessible color contrast. In the EU, the European Accessibility Act (EAA) requires most digital products and services to meet WCAG 2.1 AA by June 2025, with member-state penalties for violations. The UK Equality Act 2010 carries similar obligations. Government and public-sector sites face the strictest enforcement. Meeting WCAG AA contrast is one of the lowest-effort ways to reduce legal exposure.
Sources
- WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — the W3C accessibility standard that defines the 4.5:1 and 7:1 contrast thresholds used by this tool.
- Machado, Oliveira & Fernandes (2009) — Color Vision Deficiency simulation — the physiologically-grounded color-blindness simulation model behind the protanopia / deuteranopia / tritanopia previews.
☕
Support the creator
Did this tool help you? ☕
This is a free side project I built in my spare time. If it saved you time or helped you think through a decision, buying me a coffee keeps the lights on!
Related tools
More small utilities from AppicLab