Loading the next page.
Loading the next page.
Pick a color. Build a system. Take it into your work.
Check actual color pairs, alpha compositing and WCAG contrast thresholds.
Semi-transparent backgrounds are composited over the canvas. Text is then composited over that resulting background. Pass/fail uses the unrounded ratio.
WCAG contrast ratio
5.39:1
Large text: at least 18pt regular or 14pt bold. Relevant non-text controls use 3:1 under a separate criterion.
This paragraph previews the selected foreground over the selected background and opaque canvas.
A short, important detail. Information needs more than color alone. Add labels, shapes and clear wording.
Vision previews are approximations, not a diagnosis or a substitute for feedback from people with color vision differences. The numeric contrast score above always refers to the original pair.
Ratios use WCAG relative luminance after transparency is composited over the chosen opaque canvas. AA normal text needs 4.5:1; AA large text and relevant non-text controls need 3:1. AAA normal text needs 7:1. Color checks do not establish whole-page accessibility.
Shared between tools