Where you bring a color or palette to be audited: contrast ratios against WCAG (Web Content Accessibility Guidelines) thresholds, color-blindness previews, Oklab perceptual distance, nearest named-color lookup, color temperature, and palette statistics, all in one tab.
The Accessibility tab is Chroma’s color-analysis workspace. Six panels that each take one or two colors (or a whole palette) and answer a specific question: is the contrast legal under WCAG (Web Content Accessibility Guidelines) 2.1, how does this color look to a player with deuteranopia, how far apart are these two colors perceptually, what is the closest named color in CSS Level 4, what is the correlated color temperature in Kelvin, and what does the loaded palette look like statistically.
Summary
Picking a color that looks right on the artist’s monitor is the easy half of the job. The other half is making sure the color also works for players who cannot see it the same way: someone with a common form of color blindness, a player with their phone on auto-brightness in direct sunlight, a designer reviewing the asset on a low-quality display in a different building. Accessibility is the tab Chroma uses for those second-half checks.
Six panels cover the common cases. The WCAG Contrast panel takes a foreground and a background color and reports the contrast ratio against the four WCAG 2.1 thresholds with pass/fail badges. The Color Blindness Simulator takes a color and previews how it would look to a player with one of eight different color vision conditions. The Oklab Delta-E (perceptual distance) calculator takes two colors and reports their distance with a descriptive rating. The Nearest Named panel resolves a color to the closest entry in one of four named-color databases. The CCT (Correlated Color Temperature) panel reports the color temperature in Kelvin. The Palette Statistics panel summarises the loaded palette numerically (entry count, HSV averages and ranges, average Oklab lightness, minimum adjacent perceptual distance).
- Verify that UI text passes WCAG 2.1 AA or AAA contrast against its background before shipping.
- Preview a palette under all eight color blindness conditions to catch combinations that become indistinguishable for affected players.
- Quantify “how different” two colors look perceptually with Oklab (a perceptually uniform color space) delta-E, calibrated against named perceptual rating thresholds.
- Resolve any color to its closest named match in Chroma Colors, CSS Color Module Level 4, X11, or RAL Classic, for documentation or for matching against an external reference.
- Read the color temperature of a “white” light source against the Kelvin scale to verify it lands where intended (warm tungsten, neutral sunlight, cool overcast).
- Audit a palette’s perceptual distribution and find the closest pair of swatches, the most extreme HSV values, the average brightness.
Features
- WCAG 2.1 contrast checker. Foreground and background color pickers, a sample text preview that renders the foreground over the background at multiple sizes, the contrast ratio formatted as
X.XX:1, and four pass / fail badges: AA Normal (>= 4.5:1), AAA Normal (>= 7:1), AA Large (>= 3:1), AAA Large (>= 4.5:1). - Color blindness simulator. Eight types laid out together so a color can be compared across all of them at once: Normal (baseline), Protanopia (red-blind, full Vienot-Brettel-Mollon dichromacy matrix), Deuteranopia (green-blind, full matrix), Tritanopia (blue-blind, full matrix), Protanomaly (60% Protanopia blended with original), Deuteranomaly (60% Deuteranopia blended), Tritanomaly (60% Tritanopia blended), Achromatopsia (full grayscale via Rec. 709 / BT.709 luminance). The simulation runs in linear RGB for physical correctness.
- Oklab delta-E calculator. Two color pickers and a live readout of the Euclidean distance between them in Oklab space, with a descriptive rating label: Imperceptible (< 0.01), Very Subtle (< 0.03), Subtle (< 0.06), Noticeable (< 0.10), Distinct (< 0.20), Strong (>= 0.20). The same rating scale that the Gradient Editor’s Reduction slider uses.
- Nearest named color. Color picker, named-color database dropdown, and a live readout of the nearest entry by Oklab delta-E. Four databases: Chroma Colors (866 curated entries, the default), CSS Color Module Level 4 (148 entries), X11 (CSS L4 superset), RAL Classic (industrial paint standard subset). The dropdown re-syncs from Preferences on tab activation, so a Preferences change propagates without reopening the window.
- Correlated Color Temperature (CCT). Color picker and a live readout in Kelvin, computed via McCamy’s 1992 cubic polynomial approximation. Includes a descriptive label (e.g. “Warm White”, “Daylight”, “Overcast Sky”) so the number has a familiar reference point. Returns “off-locus” for colors too far from the blackbody curve to have a meaningful temperature.
- Palette statistics. Reads from the active palette in the Palette Editor and reports: entry count, average HSV across all entries, HSV minimum and maximum per channel, average Oklab lightness, and minimum adjacent Oklab delta-E (the perceptual distance between the two closest swatches in the palette).
- Active-color integration. Use Active Color as Foreground / as Background buttons in the WCAG panel; Use Active Color buttons in the simulator and the delta-E, nearest-named, and CCT panels. The active color from the Color Editor is one click away from any of the analysis panels.
- Pure-math implementations. Every metric lives in
ChromaAnalysis.csindependent of the editor UI. The same code runs in unit tests and on live colors; the panel only feeds and renders. - Per-tab Reset. The window-level Reset action clears the Accessibility tab’s named-color database EditorPref so the canonical default (Preferences default) takes over again on the next activation.
Recipes
These recipes are self-contained auditing workflows. Each one targets a single question you need answered about one or more colors. Scan the recipe names, find the one that matches what you are checking, and follow the steps.
Check a UI text pair for WCAG AA contrast
Problem. You’ve picked a foreground color for HUD text and a background color for the panel behind it, and you need to know whether the pair passes WCAG (Web Content Accessibility Guidelines) 2.1 before it ships. Many studios target at least Level AA for in-game text; government-facing or accessibility-first products often require AAA.
Solution. Open Chroma’s Accessibility tab. In the WCAG 2.1 Contrast Checker section at the top, set the Foreground picker to your text color and the Background picker to your panel color. The ratio label updates immediately in the form X.XX:1, and four badges show pass or fail:
- AA Normal (>= 4.5:1). The standard threshold for body text at normal sizes – under 18 pt, or under 14 pt bold.
- AAA Normal (>= 7:1). The stricter threshold for enhanced conformance. Required when targeting government interfaces or dedicated accessibility products in some jurisdictions.
- AA Large (>= 3:1). For large text at 18 pt or larger, or 14 pt bold or larger.
- AAA Large (>= 4.5:1). The stricter AAA threshold for large text.
The sample text preview in the panel renders your foreground on your background at a representative size so you can eyeball readability alongside the numeric verdict.
If your text color is already loaded in the Color Editor as the active color, click Use Active Color as Foreground to pull it directly into the WCAG picker without re-entering the hex code. Do the same with Use Active Color as Background for the panel color.
Nudge a failing pair until it passes
Problem. Your text-background pair fails AA Normal at 4.2:1 – just short of the 4.5:1 threshold. You want the smallest lightness adjustment that pushes it over.
Solution. With the failing pair already loaded in the WCAG panel, switch to the Color Editor tab and load the foreground color. Drag the Oklab L slider up (darkening or lightening the text toward higher contrast) and watch the ratio readout in the Accessibility tab update live as the active color changes. Stop as soon as the AA Normal badge flips to PASS. Alternatively, edit the background color instead – a darker background behind light text raises contrast the same way.
The Use Active Color as Foreground button re-pins the active color into the WCAG picker each time you click it. Click it after each adjustment to see the updated ratio without leaving the Color Editor tab.
Preview a game-state palette under color blindness
Problem. Your game uses color to distinguish gameplay states – red for danger, green for safe, blue for collectibles. You need to verify that players with common color vision conditions can still tell those states apart.
Solution. In the Color Blindness Simulator section, drop the first candidate color into the Color picker and select a deficiency type from the Type dropdown:
- Protanopia – no red-cone response. Affects roughly 1% of males.
- Deuteranopia – no green-cone response. Affects roughly 1% of males. Together with Protanopia, red-green confusion covers about 2% of males.
- Deuteranomaly – reduced green-cone response. The most prevalent condition at roughly 5% of males.
- Tritanopia – no blue-cone response. Rare (under 0.01%).
- Protanomaly / Tritanomaly – partial versions of the above, simulated at 60% severity.
- Achromatopsia – complete absence of color discrimination, luminance only. A useful worst-case sanity check even when the product has no explicit achromatopsia requirement.
The Original and Simulated swatches appear side by side. If they look identical under a given deficiency, the color pair your game relies on will read as a single hue to players with that condition.
Repeat for each color that carries a distinct gameplay meaning. The simulator updates immediately when you change the Color picker or the Type dropdown, so you can step through the palette quickly.
If the simulator reveals a collision – say, your danger red and your safe green converge under Deuteranopia – the remedy is not to remove the color coding but to add a secondary cue: a distinct icon shape, a text label, a different brightness level, or a border pattern. Color alone should not be the only signal.
Measure perceptual distance with Oklab delta-E
Problem. You have two colors that look “close but different” and want a number for how close. Channel-by-channel RGB differences are not meaningful here – a 10-unit shift in green is far more visible than a 10-unit shift in blue. You need a perceptually calibrated distance.
Solution. In the Oklab Delta-E Calculator section, drop the first color into Color A and the second into Color B. The readout updates immediately in the form:
Delta-E (Oklab): 0.0842 -- Noticeable
The descriptive label maps to these thresholds, which are the same scale the Gradient Editor’s Reduction slider uses:
| Delta-E | Rating |
|---|---|
| < 0.01 | Imperceptible. Indistinguishable on most monitors at typical viewing distances. |
| < 0.03 | Very Subtle. Distinguishable on close inspection but easily missed in passing. |
| < 0.06 | Subtle. Reads as “shades of the same color” on direct comparison. |
| < 0.10 | Noticeable. Reads as distinct colors on direct comparison. |
| < 0.20 | Distinct. Reads as distinct colors at a glance. |
| >= 0.20 | Strong. Reads as different color identities (red vs blue, not “two reds”). |
To populate a picker from the global active color without re-entering a hex value, click the Use Active Color button on either picker.
Look up the nearest named color
Problem. You have a custom color and need either a human-readable name for it (for documentation, handoff to a designer, or asset naming), a CSS keyword that approximates it, or a RAL code that maps to the equivalent physical paint color.
Solution. In the Nearest Named Color section, drop your color into the Color picker. Select the database from the Database dropdown:
- Chroma Colors (866 entries). A curated palette with descriptive names like “Cerulean Frost” or “Burnt Sienna”. The default.
- CSS Color Module Level 4 (148 entries). The standardized CSS palette. Use this when names need to be portable to web or CSS contexts.
- X11. Superset of CSS Level 4 with historic X Window System names, including numbered gray and red variants. Use when matching documentation that predates CSS.
- RAL Classic. A representative subset of the industrial paint standard. Use when the color needs to map to a physical paint, signage, or product specification.
The result swatch and label update immediately. The label shows the matched name, the hex code, and the Oklab delta-E distance so you know how close the match is.
The database default for this panel is driven by the Default Named-Color Database setting in Preferences. Changing the dropdown here changes only this panel’s active database for the current session. To change the project-wide default, edit Preferences – the next tab activation re-syncs the dropdown from there automatically.
Verify a light-source color temperature
Problem. You’re tuning the color of a skylight, a torch, a neon tube, or a “white” UI background and want to confirm the color temperature lands in the right range: tungsten warmth, neutral noon sunlight, cool overcast sky.
Solution. In the Color Temperature (CCT) section, drop your color into the Color picker. The readout shows the estimated Kelvin value with a descriptive label. The CCT (Correlated Color Temperature) is computed via McCamy’s 1992 cubic polynomial approximation. Labels and approximate Kelvin boundaries from the source:
| Range | Label |
|---|---|
| < 2000 K | Candle-like |
| < 3000 K | Warm White |
| < 4000 K | Neutral Warm |
| < 5000 K | Neutral |
| < 6500 K | Cool White |
| < 8000 K | Daylight |
| < 12000 K | Overcast Sky |
| >= 12000 K | Blue Sky |
If the readout shows “off-locus (not near blackbody curve)”, the color is too saturated or too far from white for the McCamy formula to produce a meaningful temperature. CCT is meaningful only for near-white, light-source-like colors. A saturated red or vivid green has no defined color temperature in the McCamy sense; the formula returns the temperature of the closest point on the Planckian locus, which does not match perceptual expectations.
For generating ramps across the Kelvin scale (blackbody radiation), use the Theory tab’s Blackbody section.
Audit a palette for near-duplicates and perceptual range
Problem. You’ve built or imported a palette and want to know: how many swatches are effectively duplicates, does the palette span a useful perceptual range, and are any two entries so close they’ll look identical on screen?
Solution. Load the palette in the Palette Editor tab. Switch to the Accessibility tab and scroll to the Palette Statistics section. The readout updates automatically to reflect the active palette and shows:
- Entry count. Total swatches.
- Average Hue. Mean hue in degrees across all entries.
- Saturation. Average, minimum, and maximum saturation across all entries.
- Value (HSV). Average, minimum, and maximum value (brightness) across all entries.
- Oklab Lightness (avg). The mean perceptual lightness. Higher means a brighter palette overall.
- Min Adjacent Delta-E (Oklab). The perceptual distance between the two closest consecutive swatches in the palette. The most actionable number: a value below 0.06 (Subtle) means at least two swatches will likely look identical in context.
If Min Adjacent Delta-E reads below Subtle, find the offending pair by sorting the palette by hue or luminance in the Palette Editor and looking for visually matching neighbors. Then decide whether to merge them or push them apart using the Color Editor.
Click Refresh after making edits in the Palette Editor to force a recompute if the statistics have not updated automatically.
Run a combined palette accessibility audit
Problem. You’re about to ship a UI palette and need to confirm it passes on three fronts at once: WCAG contrast for overlapping color pairs, color-blindness legibility, and no near-duplicate swatches.
Solution. This is a sequential workflow across all three panels.
-
WCAG check for overlay pairs. In the Accessibility tab, walk through each foreground-background pair that appears in the UI (body text on panel, icon on background, label on button). For each pair, load the foreground into the WCAG Foreground picker and the background into the Background picker. Confirm the AA Normal badge shows PASS. Note any pairs that fail.
-
Color-blindness check for meaningful color pairs. For each color pair that carries a distinct gameplay or UI meaning (status icons, team colors, win/lose states), load the first color into the simulator’s Color picker and step through the deficiency types – especially Protanopia, Deuteranopia, and Deuteranomaly. Confirm the Simulated swatch reads as visually distinct from the Original for each condition. If two swatches collapse into one under a condition, the design relies on color discrimination that a fraction of players cannot make.
-
Palette statistics check. With the palette active in the Palette Editor tab, read the Min Adjacent Delta-E in Palette Statistics. Anything below 0.06 is a candidate for a merge or a push-apart. Use the Color Editor tab to adjust the offending swatch and re-check.