Run the system color test

Automatic measurements

Colors are measured automatically when this page loads. No setup is needed for the default Canvas backdrop. Verify the browser/system details below, then select “Capture light and dark” to rerun all 42 keywords in both schemes and save a repeatable snapshot.

Light and dark are requested CSS color schemes, not changes to your OS settings. Change OS preferences separately and capture again. Recorded colors may include alpha.

Display mode Include deprecated keywords

Optional: change the contrast backdrop

Translucent colors need an opaque surface behind them to calculate contrast. By default, each mode uses its own resolved Canvas color. White and black let you test other surfaces; opaque pairs keep the same ratio on known backdrops. This changes compositing, not keyword resolution. Raw colors and alpha are always preserved in the export.

Opaque backdrop for contrast

Loading measurement tools. If the controls stay disabled, check JavaScript and reload.

Identify this browser/system combination

Prefilled values are browser-reported estimates. They can be reduced, frozen, or spoofed: verify browser and OS versions in their “About” screens and edit these fields before capturing. The optional button requests additional version details locally; it doesn’t upload them.

Browser and version OS and version Context Forced-color theme name

Enter the Windows Contrast theme or your custom theme’s name when testing one; the browser cannot discover it. Leave blank when no theme is selected. A name is required when the browser reports active forced colors. The OS theme name and browser-detected state are recorded separately.

Notes: device, OS accent, experimental flags, or other relevant settings

Don’t include names or other personal information. Data stays in this tab’s memory: export before closing or reloading.

Live color grid

Every current keyword is measured, plus the deprecated catalog when displayed. N/A means the browser rejected the keyword in the CSS color property. Eight-digit hex includes alpha: #rrggbbaa.

Live foreground/background pairs

Samples composite over the selected backdrop. Only these reference samples bypass forced-color paint adjustments; the rest of this page keeps the user’s color preferences.

Export and compare this session

Each capture records both modes, all 42 keywords, environment metadata, and calculated pair results. Import exports from other devices to add columns. Existing runs are never replaced. Published captures are shown separately on the results page; this session starts empty.

Import capture JSON files

Submit reviewed results to the study

Export JSON and review its metadata and Notes first. Upload the JSON to GitHub, choose a new branch, and open a pull request. GitHub may ask you to sign in or create a fork.

With a local checkout, write access, and an authenticated GitHub CLI, npm run submit -- /path/to/capture.json validates the file and opens a PR automatically. Use --dry-run to check it without sending anything. Never enter access tokens on this page.

Capture this device or import files to populate the tables.

Individual system colors

Includes individual values for paired keywords too. Columns follow the Display mode setting above.

Color pairs

Each capture has a color column and a contrast column spanning its background/foreground rows. Normal text: AA ≥ 4.5:1, AAA ≥ 7:1. Large text: AA ≥ 3:1, AAA ≥ 4.5:1. Grades use unrounded ratios; displayed ratios are rounded. Threshold results are not a WCAG conformance verdict.

Verdict fills: green means all five thresholds pass; amber means some pass; red means none pass; neutral means unavailable. These are UI indicators, not recorded system colors. Every result also says pass or fail in text; forced-color modes retain your chosen palette. Expand a header’s “Run details” for its full measurement conditions.