Contrast Playground
Adjust background and text to explore WCAG 2.2 AA/AAA contrast. Optionally apply your settings site‑wide to preview the theme.
Colors
Drag to increase or decrease contrast preview.
Live preview
Accessible design is readable, clear, and comfortable. This paragraph shows how body copy will look.
Headings, buttons, and cards inherit your foreground/background for a full‑site preview.
WCAG 2.2 contrast
Ratio: 17.85:1
- AA Normal Pass
- AA Large Pass
- AAA Normal Pass
- AAA Large Pass
Tip: Keep normal text at AA (4.5:1) or higher, and aim for AAA (7:1) wherever reasonable. Large text (18pt/24px or 14pt/18.66px bold) has lower minimums.