Tools / Color
Color Contrast
Check one foreground and background pair for readability, UI use, and WCAG 2.2 contrast.
1. Colors
WCAG is the compliance result. APCA is a supplemental readability signal.
2. Live preview
3. Contrast result
Contrast ratio
Excellent13.24 : 1
WCAG results
AAA large text (4.5:1) Pass
AAA normal text (7:1) Pass
AA large text (3:1) Pass
AA normal text (4.5:1) Pass
UI/non-text contrast (3:1) Pass
APCA readability signal
Lc 98.9
APCA signal is strong
Color info
Foreground
#1A237E
- RGB
- 26, 35, 126
- HSL
- 235deg, 66%, 30%
- Relative luminance
- 0.0293
Background
#FFFFFF
- RGB
- 255, 255, 255
- HSL
- 0deg, 0%, 100%
- Relative luminance
- 1.0000
4. Accessibility tests
Excellent
APCA signal is strong
WCAG & accessibility checks
WCAG 2.2 AA Normal Text Pass
WCAG 2.2 AA Large Text Pass
WCAG 2.2 AAA Normal Text Pass
WCAG 2.2 AAA Large Text Pass
UI Components / Non-text Pass
APCA readability signal Lc 98.9
Focus indicator safety Pass
Disabled state caution Warning
Color-blind simulation
Normal vision
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
Simulations are approximations. Always test with real users when possible.
5. Recommendations
Suggestions
Great contrast for body text
Excellent for headings
Works for buttons and UI elements
APCA signal is strong
Check disabled states and opacity
Auto fix suggestions
Current pair
#1A237E
#FFFFFF
If you want to keep the background:
If you want to keep the text:
Best practices
- Use at least 4.5:1 for normal text
- Use at least 3:1 for large text
- Don't rely on color alone to convey info
- Test simulations with real users too
- Check UI components buttons, inputs, focus
- Consider bright spaces and low-quality screens