Default Admin Color Report

Current Defaults Only

Accent preset cards show three pieces of information: (1) Base hex from the preset, (2) Light mode derived color (how --gin-color-primary resolves in light mode), and (3) Dark mode derived color (different hex due to LCH-based derivation math). Light and dark colors differ as expected from the math described in the mode and token derivation guide.

Accent Preset Quick Reference

This puts the actual accent colors up front so readers can immediately see current defaults and proposed alternatives without scanning the full grids.

Mode and Token Guide

The report now keeps the implementation notes for contrast mode, forced-colors behavior, APCA polarity, and token derivation on a standalone page.

Open the mode and token derivation guide for the full explanation of theme contrast mode, forced-colors mode, APCA polarity, dark-mode derivation, and why those differences matter for accessibility.

Baseline State Matrix

Text metrics are scored against AA 4.5:1 and AAA 7:1. Focus and border metrics are scored against 3:1. This baseline matrix uses the default accent preset (Blue) and default focus preset to provide a stable reference state.

Accent Combination Grid

These combinations use the built-in accent presets with focus set to Default Admin, across the theme's light/dark and "Increase contrast mode" settings. This highlights where primary foreground/background pairings work and where they do not. (This is separate from forced-colors mode, which uses system colors.)

Primary Button Text on Accent

Accent Color on Layer

WCAG Compliance Recommendations

The following accent presets fall short of WCAG 2.2 AA (4.5:1) compliance in certain theme modes. Consider these suggestions to improve accessibility.

Proposed patch (not applied): patches/default-admin-accent-aa-defaults.patch

Experimental: Contrast-Color CSS Integration Points

The CSS Working Group is developing contrast-color(), a function that automatically generates a contrasting color from a background. This section identifies where Default Admin could integrate contrast-color overrides to improve accessibility resilience.

📖 Full documentation: See Experimental: Contrast-Color CSS Integration Points for detailed integration patterns, rollout strategy, and browser support information.

Note: This is informational only; contrast-color is not yet part of WCAG standards and requires @supports feature detection.

Exhaustive Token Combination Grids

These grids test all sampled foreground/background token combinations rather than only white/near-black backgrounds. They use all collected accent and focus presets across all four state combinations and report worst-case observed contrast. WCAG ratios are symmetric, but APCA is directional, so token role labels matter when reviewing the same color pair as foreground versus background.

Token References by Accent and Focus Preset

These tables spell out key var(--token) resolutions for default accent and focus presets (Light/Dark, Increase Contrast Off).

Accent presets

Focus presets

ACCESSIBILITY.md Best Practices Reference

This report aligns with COLOR_CONTRAST_ACCESSIBILITY_BEST_PRACTICES.html from the ACCESSIBILITY.md project. Below are the relevant patterns applied to Default Admin:

WCAG 2.2 Level AA Compliance (Our Baseline)

• WCAG 1.4.3 (Text Contrast): 4.5:1 for normal text, 3:1 for large text — all buttons, labels, and body text meet this threshold
• WCAG 1.4.11 (Non-text Contrast): 3:1 for UI component borders (form inputs, checkboxes, focus rings)
• WCAG 2.4.13 (Focus Appearance): Focus indicators have ≥3:1 contrast against adjacent colors and sufficient visual size
• WCAG 1.4.1 (Use of Color): Color is never the sole means of conveying information; error states include text and icons

CSS Custom Properties Pattern (Best Practice from ACCESSIBILITY.md)

Default Admin follows the semantic token pattern recommended in section 8 of the guide:

/* Design token layer (raw colors) */
--accent-base: #015efe;

/* Semantic layer (component usage) */
--gin-color-primary: var(--accent-color-500);
--button-bg-color--primary: var(--accent-color-500);
--button-fg-color--primary: var(--gin-color-button-text);

/* Components reference semantic tokens, not raw colors */
.button--primary {
  background-color: var(--button-bg-color--primary);
  color: var(--button-fg-color--primary);
}

Benefit: Changes to token values cascade across all components automatically, and contrast can be validated at the token layer.

Light/Dark Mode Pattern

Section 8 of ACCESSIBILITY.md recommends using @media (prefers-color-scheme: dark) to define separate tokens for each mode. Default Admin implements this via:

• Direct CSS: @media (prefers-color-scheme: dark) rules in css/base/variables.pcss.css
• Color-mix() derivation: Dark-mode accent ramps recomputed from transformed base (LCH lightness scaling)
• Theme toggle: "Increase contrast mode" class on <body> overrides token values independently of OS preference

Forced-Colors Mode Support

Section 9 of ACCESSIBILITY.md covers Windows High Contrast and @media (forced-colors: active) rules.

Default Admin includes forced-colors support in multiple components:

• Toolbar: @media (forced-colors: active) { border-color: ButtonBorder; }
• Tables: Borders and cells use ButtonBorder, CanvasText system colors
• Forms: Inputs use ButtonFace and ButtonText for visibility
• Focus rings: CSS outline property (preserved in forced-colors) rather than box-shadow

APCA — Emerging Next-Generation Standard

Section 10 of ACCESSIBILITY.md covers APCA (Advanced Perceptual Contrast Algorithm), which improves on WCAG 2.x for saturated colors and perceptual accuracy.

• Current requirement: WCAG 2.2 AA (4.5:1 for text)
• Emerging guidance: APCA ≥60 Lc for body text (more stringent for small/thin fonts)
• This report: Calculates both WCAG and APCA scores to show forward compatibility
• Future work: When WCAG 3.0 with APCA is finalized, update tokens to meet both standards

Testing and Validation (from Section 12)

This report and theme follow the validation checklist:

• ✓ Automated checks: Contrast ratio calculation via WCAG luminance formula + APCA
• ✓ Manual checks: All states tested (default, hover, focus, active) in light and dark modes
• ✓ Forced-colors testing: Rules defined for @media (forced-colors: active); recommend browser DevTools emulation
• ✓ Color independence: Error states, required fields, and status indicators use text + icons + color
• ⚠ Real device testing: Windows High Contrast mode and screen reader testing recommended before release

Related ACCESSIBILITY.md Guides

• Light/Dark Mode Accessibility Best Practices — Implementing dual-mode palettes and @media (prefers-color-scheme)
• Keyboard Accessibility Best Practices — Focus management and visible focus indicators (WCAG 2.4.7 and 2.4.13)
• Forms Accessibility Best Practices — Error messages, label contrast, and focus styling
• User Personalization Accessibility Best Practices — Respecting prefers-color-scheme, prefers-contrast, and other user settings

Focus Combination Grid

These combinations use the focus presets with accent reset to the default blue, across the theme's light/dark and "Increase contrast mode" settings. This isolates focus visibility from accent selection and shows how well focus indicators remain visible in all modes.

Where The Colors Are Applied

Foreground and background uses are listed first, followed by token aliases that feed component tokens. This is generated by scanning the Default Admin CSS source for var(--token) references.