Target
Contrast ratio
Large text only3.86:1 contrast between #7A5CFF text and #F2F0F7 background — Large text only
- Body text (under 18.66 px bold / 24 px)needs 4.5:1Fail
- Large text (24 px+, or 18.66 px+ bold)needs 3:1Pass
- AAA body textneeds 7:1Fail
- Icons, borders, focus ringsneeds 3:1Pass
or start from a brand color:
Live preview
Large heading, 40 px bold
Body copy at 17 px. This is the size most of your site actually runs at, and the size WCAG holds to 4.5:1. If this paragraph feels like effort to read, the number on the left is telling the truth.
Fine print at 13 px — captions, form hints, footnotes, disclaimers.
Solid buttonOutline buttonA text link
Non-text UI at 3:1
Nearest passing colors
Same hue and saturation, lightness moved the minimum distanceAdjust the text color
#6B4AFF4.58:1 · lightness −3.5, hue kept
Adjust the background
#0B09114.52:1 · lightness −90.5, hue kept
What a ratio can’t tell you
A passing palette is the floor. Not the design.
Contrast math ignores type weight, motion, focus states, and everything sitting on top of an image. We use this checker to set the palette, then a person tests the pages with a screen reader.