Accessibility Optimization

Analyze and fix your palette for WCAG 2.1 and Color Blindness automatically.

Accessibility Score
67/100

Your Palette

WCAG Level:
#FF5733
#33FF57
#3357FF
#F3FF33
#FF33F3

Diagnosis: Adjustments Required

We detected 4 contrast or visibility issues. We can mathematically adjust the colors while maintaining their essence.

Audit Report

Colores 1 y 3 difíciles de distinguir (1.69:1) en modo normal
Colores 1 y 5 difíciles de distinguir (1.05:1) en modo normal
Colores 2 y 4 difíciles de distinguir (1.23:1) en modo normal
Colores 3 y 5 difíciles de distinguir (1.78:1) en modo normal

💡 Tip

Your colors are very similar to each other. For best results, use at least one light and one dark color, or change some manually.

Use the lock to protect important colors before repairing.

WCAG AA
PASS
WCAG AA is the web standard requiring a minimum contrast of 4.5:1 between text and background.
Colorblind
WARN
8% of men have color blindness. These colors may look very similar to them.

Palette Statistics

Luminosity Distribution

0%
20%
40%
60%
100%

Ideal: spread across all ranges

Avg Luminosity
47%
Avg Saturation
100%
Luminosity Range
76%
✓ Good contrast range
Temperature
❄️ Cool
Hue Diversity42%

Text Preview

Sample TextSecondary text at smaller size
6.7:1
AA ✓AAA ✓
Sample TextSecondary text at smaller size
15.6:1
AA ✓AAA ✓
Sample TextSecondary text at smaller size
5.3:1
AA ✓AAA ✓
Sample TextSecondary text at smaller size
19.2:1
AA ✓AAA ✓
Sample TextSecondary text at smaller size
7.0:1
AA ✓AAA ✓

Accessibility Progress

4/5criteria
Overall Progress80%
WCAG AA Contrast
Colorblind Safe
Luminosity Range
Color Diversity
No Role Conflicts

Colorblind Comparison

Click "Show All" to see your palette simulated for different types of color blindness

Custom Contrast Checker

Accessible Palette Presets

Click "Show Presets" to see pre-made accessible color palettes

Automatic Suggestions

Click on any suggestion to apply it to your palette

Color 1: #FF5733Has accessibility issues
Suggested alternatives:
Color 2: #33FF57Has accessibility issues
Suggested alternatives:
Color 3: #3357FFHas accessibility issues
Suggested alternatives:
Color 4: #F3FF33Has accessibility issues
Suggested alternatives:
Color 5: #FF33F3Has accessibility issues
Suggested alternatives:

Detailed Analysis per Color

#FF5733Color 1

Text Contrast (WCAG)

WhiteFAIL
3.15
BlackAA
6.66
Best readability with BLACK text
Texto normal (14pt+)
NormalAa Text
Large/BoldAa Bold

Visual Simulation

protanopia
deuteranopia
tritanopia

Conflicts Detected

  • • Colores 1 y 3 difíciles de distinguir (1.69:1) en modo normal
  • • Colores 1 y 5 difíciles de distinguir (1.05:1) en modo normal
#33FF57Color 2

Text Contrast (WCAG)

WhiteFAIL
1.35
BlackAAA
15.58
Best readability with BLACK text
Apto para todo texto
NormalAa Text
Large/BoldAa Bold

Visual Simulation

protanopia
deuteranopia
tritanopia

Conflicts Detected

  • • Colores 2 y 4 difíciles de distinguir (1.23:1) en modo normal
#3357FFColor 3

Text Contrast (WCAG)

WhiteAA
5.32
BlackFAIL
3.95
Best readability with WHITE text
Texto normal (14pt+)
NormalAa Text
Large/BoldAa Bold

Visual Simulation

protanopia
deuteranopia
tritanopia

Conflicts Detected

  • • Colores 1 y 3 difíciles de distinguir (1.69:1) en modo normal
  • • Colores 3 y 5 difíciles de distinguir (1.78:1) en modo normal
#F3FF33Color 4

Text Contrast (WCAG)

WhiteFAIL
1.10
BlackAAA
19.16
Best readability with BLACK text
Apto para todo texto
NormalAa Text
Large/BoldAa Bold

Visual Simulation

protanopia
deuteranopia
tritanopia

Conflicts Detected

  • • Colores 2 y 4 difíciles de distinguir (1.23:1) en modo normal
#FF33F3Color 5

Text Contrast (WCAG)

WhiteFAIL
2.99
BlackAAA
7.02
Best readability with BLACK text
Apto para todo texto
NormalAa Text
Large/BoldAa Bold

Visual Simulation

protanopia
deuteranopia
tritanopia

Conflicts Detected

  • • Colores 1 y 5 difíciles de distinguir (1.05:1) en modo normal
  • • Colores 3 y 5 difíciles de distinguir (1.78:1) en modo normal