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.
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. WCAG Contrast takes a foreground and a background color and reports the contrast ratio against the four WCAG 2.1 thresholds, with pass/fail badges for each. Color Blindness Simulator previews how a chosen color would look to a player under one of eight different color vision conditions. Oklab Delta-E (perceptual distance) compares two colors and reports their distance with a descriptive rating. Nearest Named resolves a color to the closest entry in one of four named-color databases, while CCT (Correlated Color Temperature) reports the color temperature in Kelvin. Palette Statistics rounds it out by summarizing 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 feed a sample text preview that renders the foreground over the background at multiple sizes, alongside the contrast ratio formatted as
X.XX:1and 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. A Type dropdown picks one of eight types, and the Original and Simulated swatches show the color side by side: 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. A color picker and a named-color database dropdown drive a live readout of the nearest entry by Oklab delta-E. Four databases are available: 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). A color picker drives a live readout in Kelvin, computed via McCamy’s 1992 cubic polynomial approximation. It includes a descriptive label (e.g. “Warm White”, “Daylight”, “Overcast Sky”) so the number has a familiar reference point, and 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. Double-clicking the New swatch in the color preview strip above the tabs loads the active color into the primary picker of every panel: Foreground in the WCAG panel, Color in the simulator, nearest-named, and CCT panels, and Color A in the delta-E panel. The Background and Color B pickers are set by hand.
- Shared with Scylla Core. The measurements come from Scylla Core rather than from the editor UI: contrast, luminance, Oklab delta-E, and CCT from
ColorAnalysis, and the color blindness simulation fromColorBlindnessSimulator. The panel only feeds colors in and renders the results, and game code can run the same calculations at runtime. See Color utilities. - 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
Each recipe below answers one specific question about one or more colors, and none of them depend on the others. Find the name that matches what you’re checking and follow it.
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 the active color in the Color Editor, double-click the New swatch in the color preview strip to pull it into the Foreground picker without re-entering the hex code. The Background picker has no such shortcut, so set the panel color there directly.
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, make the foreground color active, and switch the picker to the LCh Plane view. Move the L strip on the right of the plane in the direction that increases contrast (lighter text on a dark background, darker text on a light one). Then double-click the New swatch in the color preview strip to push the adjusted color into the WCAG Foreground picker, and check the ratio on the Accessibility tab. Repeat until the AA Normal badge flips to PASS. Alternatively, adjust the background color in the WCAG panel instead – a darker background behind light text raises contrast the same way.
The WCAG pickers do not follow the active color on their own. Each double-click on the New swatch copies the current active color into the Foreground picker, so repeat it after every adjustment.
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 Color A from the global active color without re-entering a hex value, double-click the New swatch in the color preview strip. Color B is set through its own 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 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.