Logo of RBits

Open tool

Search all RBits tools.

Frontend

New

Color Contrast Checker

Check WCAG contrast ratios for foreground and background colors with optional camera sampling.

contrastwcagcamera
WCAG contrast checksCamera samplingCopy-ready CSS
Color Pair

rgb(17, 17, 17) / hsl(0, 0%, 7%)

rgb(255, 255, 255) / hsl(0, 0%, 100%)

Live Preview
18.88:1

Sample interface text

Use this preview to check body copy, labels, and controls against the selected background.

Button sample
WCAG Results

Contrast ratio

18.88:1

Normal text AA

4.5:1 minimumPass

Normal text AAA

7:1 minimumPass

Large text AA

3:1 minimumPass

Large text AAA

4.5:1 minimumPass

UI and graphics AA

3:1 minimumPass
Copy CSS
:root {
  --color-foreground: #111111;
  --color-background: #ffffff;
}

.contrast-sample {
  color: var(--color-foreground);
  background-color: var(--color-background);
}