Contrast Ratio
WCAG Contrast Ratio
A numerical measure of luminance difference between text and background, with 4.5:1 minimum for WCAG AA compliance.
Detalle técnico
WCAG 2.1 defines contrast ratio as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are relative luminance values. Level AA requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). Level AAA requires 7:1 and 4.5:1 respectively. WCAG 3.0's proposed APCA (Advanced Perceptual Contrast Algorithm) accounts for font weight and polarity (light-on-dark vs dark-on-light), providing more accurate readability predictions than the current formula.
Ejemplo
```css
/* WCAG AA compliant color combinations */
.text-primary {
color: #1a1a1a; /* on white: 17.4:1 ✓ AAA */
background: #ffffff;
}
.text-secondary {
color: #525252; /* on white: 7.1:1 ✓ AAA */
background: #ffffff;
}
.button-primary {
color: #ffffff; /* on blue: 4.6:1 ✓ AA */
background: #2563eb;
}
```
Herramientas relacionadas
C
Color Palette Generator
T
Type Scale Generator
S
Spacing Scale Generator
R
Responsive Breakpoints
A
Aspect Ratio Calculator
C
Color Shade Generator
F
Font Pairing Suggestions
C
Contrast Checker
D
Design Tokens Generator
S
Social Media Size Guide
G
Golden Ratio Calculator
A
App Icon Size Guide
S
Shadow System Generator
M
Multi-Stop Gradient Generator
C
CSS Pattern Generator