Contrast Checker

Check any foreground and background with WCAG ratios, APCA and an accessible foreground suggestion.

Free · Unlimited use · No account needed

Foreground

Nearest CSS name: royalblue · approximate

Background

Nearest CSS name: white · approximate

Transparent backgrounds are composited over white. Foregrounds are composited over that background.

Repair target

Suggested foreground #2563EB

5.17:1 · opaque role color

Color that reads clearly.

Preview your foreground and background together. A good color system makes every message easy to read.

Preview size16pxWeight

5.17:1WCAG contrast

74.9 LcAPCA · experimental

Normal text AA · 4.5:1Pass
Normal text AAA · 7:1Fail
Large text AA · 3:1Pass
Large text AAA · 4.5:1Pass
UI graphics · 3:1Pass

Large text: at least 24px regular or approximately 18.7px bold. Preview size does not change the measured ratio. APCA is supplementary guidance, not a WCAG conformance verdict.

Export contrast report

{
  "foreground": "#2563EB",
  "background": "#FFFFFF",
  "canvas": "#FFFFFF",
  "wcag": 5.168555560022562,
  "apca": 74.85761482996853,
  "checks": [
    {
      "label": "Normal text AA",
      "target": 4.5,
      "pass": true
    },
    {
      "label": "Normal text AAA",
      "target": 7,
      "pass": false
    },
    {
      "label": "Large text AA",
      "target": 3,
      "pass": true
    },
    {
      "label": "Large text AAA",
      "target": 4.5,
      "pass": true
    },
    {
      "label": "UI graphics",
      "target": 3,
      "pass": true
    }
  ]
}

Your result

Copy or download this result for free. Saving to a workspace is optional.

Output format

:root {
  --foreground: #2563EB;
  --background: #FFFFFF;
}

Use the result now. Save it when you need to.

Each tool handles one color task at a time. Repeat calculations, copy values and download basic formats without creating a project or using a project slot.

Choose Save to workspace to keep a result in an existing or new project. Workspace project limits and advanced Pro features apply there.

Need a quick conversion? Open the color converter.