Goodfolk Design Utilities

Color Contrast Checker

Check text and background color contrast, preview the combination, and copy CSS-ready values.

Text color

Background color

Preview text

Can you read this clearly?

This preview shows how your selected text color looks against the selected background color.

Use 3-digit or 6-digit HEX colors. Contrast guidance is a practical accessibility check, but final design should also consider font size, weight, and context.

Contrast results

Contrast ratio17.85:1

Normal text AAPass

Large text AAPass

Normal text AAAPass

Large text AAAPass

Excellent contrast for most text sizes.

CSS snippet

color: #FFFFFF;
background-color: #0F172A;

Related tools

HEX Color Converter

Convert HEX colors to RGB and HSL, preview the color, and copy CSS-friendly values.

Color Palette Generator

Generate color palettes from a base color, lock favorite colors, and copy HEX values or CSS variables.

CSS Gradient Generator

Create linear CSS gradients, preview them, and copy ready-to-use CSS.