Sample heading
Secondary line preview
Background: #eefbf5
Foreground (text): #000000
Contrast: 19.75 : 1
Random bg + black or white text until the chosen contrast target is met; or enter a background to get the better of #000 / #fff.
Pick a color family to generate a set of cards that meet the selected WCAG target. Text color is automatically chosen between black and white.
Sample heading
Secondary line preview
Background: #eefbf5
Foreground (text): #000000
Contrast: 19.75 : 1
Sample heading
Secondary line preview
Background: #def7eb
Foreground (text): #000000
Contrast: 18.61 : 1
Sample heading
Secondary line preview
Background: #c5f1dd
Foreground (text): #000000
Contrast: 17.00 : 1
Sample heading
Secondary line preview
Background: #a4eac9
Foreground (text): #000000
Contrast: 15.19 : 1
Sample heading
Secondary line preview
Background: #7be0b1
Foreground (text): #000000
Contrast: 13.14 : 1
Sample heading
Secondary line preview
Background: #51d698
Foreground (text): #000000
Contrast: 11.42 : 1
Each card can copy either the bg/fg pair or a CSS snippet.
Picks #000 or #fff for maximum contrast on your background—handy for cards and buttons.
Suggested foreground: #000000
Contrast: 17.03 : 1
Same WCAG 2.1 math as the contrast checker; follow brand guidelines for production.