HomeDevColor Checker
Color tools

Color Checker

Browse the classic 24-patch color checker chart with HEX and RGB, plus a WCAG contrast checker for text and background pairs. Runs locally in your browser.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

1

Browse the chart or check contrast

Switch between the classic 24-patch reference chart and the WCAG contrast checker.

2

Select or set colors

Click a patch for HEX/RGB, or enter foreground and background colors for a contrast ratio.

3

Copy and apply

Copy codes into CSS, and use AA/AAA results to verify readable text contrast.

Color formulas

Core relationships used by this color tool.

Relative luminanceL = 0.2126 R′ + 0.7152 G′ + 0.0722 B′ (sRGB linearized)
Contrast ratio(Llighter + 0.05) / (Ldarker + 0.05)
WCAG AA (normal text)ratio ≥ 4.5 : 1
WCAG AAA (normal text)ratio ≥ 7 : 1
iLarge text (about 18pt / 14pt bold) uses AA ≥ 3:1 and AAA ≥ 4.5:1. Chart HEX values are nominal manufacturer sRGB for on-screen reference—not a substitute for a calibrated physical target under controlled light.

Example colors

Common picks with formula and result.

ϟ

Chart red patch

Primary red

Patch 15
#AF363C · rgb(175, 54, 60)
ϟ

Gray scale

Neutral ramp

Patches 19–24
#F3F3F3 … #343434
ϟ

Strong contrast

Navy on light blue

#112A46 on #ACC8E5
High ratio · often AA/AAA
ϟ

Failing pair

Light gray on white

#CCCCCC on #FFFFFF
Fails AA for normal text

Color checker specification

Version 1.0.0

Definition
A color checker (classic color-rendition chart) is a 24-patch reference target used in photography and imaging to evaluate color reproduction. On the web, the same patch set is useful as a shared sRGB reference. A contrast checker separately measures the luminance contrast ratio between text and background against WCAG AA/AAA thresholds.
What it calculates
Lookup of classic 24-patch reference colors (HEX/RGB) and WCAG contrast ratio for a foreground/background pair.
Inputs
  • Selected chart patch (1–24)
  • Foreground HEX / color picker
  • Background HEX / color picker
Outputs
  • Patch name, HEX, and rgb()
  • Contrast ratio (X:1)
  • WCAG AA/AAA pass/fail for normal and large text
  • Live text sample preview
Formula
L from sRGB; contrast = (Lmax + 0.05)/(Lmin + 0.05); AA/AAA thresholds as WCAG 2.x

The classic chart is a 4×6 grid: natural colors, miscellaneous accents, photographic primaries/secondaries, then a six-step gray scale. Use it as a shared visual reference when comparing cameras, scanners, or display pipelines—not as a replacement for hardware calibration under controlled light.

The Contrast tab follows WCAG luminance math so you can validate text/background pairs before shipping UI. For picking arbitrary hues, use the HTML color picker; for full palettes, try the color scheme generator.

/* Example: accessible navy on soft blue */
.banner {
  background-color: #acc8e5;
  color: #112a46; /* check contrast before shipping */
}
Classic 24-patch rows
RowPatchesPurpose
Natural1–6Skin, sky, foliage, flower, bluish green
Miscellaneous7–12Orange, blues, reds, greens, yellows
Primaries13–18Blue, green, red, yellow, magenta, cyan
Grayscale19–24White through black neutrals
i Physical charts (e.g. Classic / Passport form factors) are measured under standard illuminants; on-screen HEX is an approximation for UI and education.
Assumptions
  • Opaque sRGB colors (no alpha blending).
  • Chart HEX values are nominal manufacturer web references.
  • Tool runs locally; nothing is uploaded.
Units
  • HEX: #RRGGBB
  • RGB: 0–255
  • Contrast: unitless ratio X:1
Boundary conditions
  • Invalid HEX is ignored until a valid 3- or 6-digit code is entered.
  • Identical colors yield ratio 1:1.
  • Large-text thresholds assume WCAG definitions of large text size/weight.
Example
#112A46 on #ACC8E5 → high contrast, typically AA/AAA for normal text
Validation cases
  • Patch 15 Red → #AF363C
  • Patch 19 White → #F3F3F3
  • black (#000) on white (#FFF) → 21:1 · AA/AAA pass
  • #777 on #FFF → ≈4.48:1 · borderline AA normal
Sources
  • Classic ColorChecker / color-rendition chart patch set (McCamy et al., 1976)
  • Manufacturer nominal sRGB reference values for on-screen use
  • WCAG 2.x contrast ratio and AA/AAA thresholds
Calculation version
1.0.0
◎ HTML color picker › ▦ Color scheme › ◌ Color wheel › # HTML color codes › RGB RGB color chart › ⇄ HEX to RGB ›

Frequently asked questions

Key distinctions behind the tool.

What is a color checker chart?

A standardized 24-color target introduced for photographic color rendition testing. Patches approximate skin, sky, foliage, and other everyday colors plus primaries and a gray ramp, so cameras and workflows can be compared against known references.

Are the HEX codes exact for every printed chart?

No. Values here are nominal manufacturer sRGB for screen reference. Real charts differ slightly by production batch, age, and viewing illuminant. Use a spectrophotometer for critical calibration.

What contrast ratio do I need for accessibility?

WCAG AA needs at least 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 for normal text and 4.5:1 for large text.

How is contrast ratio calculated?

Convert each color to relative luminance (from linearized sRGB), then compute (lighter + 0.05) / (darker + 0.05). Higher ratios mean easier reading.

Does this tool upload my colors?

No. Chart lookup and contrast math run locally in your browser.