Logo of RBits

Open tool

Search all RBits tools.

Web & Media

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);
}