Built-in dark mode settings versus custom CSS overrides for low-vision accessibility in Kibana

Answer

In practice, Kibana’s built‑in dark mode and high‑contrast themes provide WCAG AA contrast ratios for the majority of UI elements, so they are a solid first‑line solution for low‑vision users. However, a few icons, chart labels, and legacy components can fall below the 4.5:1 threshold, especially in Kibana 9.x where the CSS‑in‑JS approach sometimes renders lighter text on dark backgrounds. Custom CSS can raise contrast and adjust spacing, but if it overrides EUI variables or hard‑codes pixel values it can break the responsive grid and alter the tab order that screen readers rely on.

Confirmed facts

• Built‑in themes use Elastic UI (EUI) CSS variables that preserve the responsive grid and component widths.
• High‑contrast mode offers WCAG AA ratios for most elements; some icons and chart labels may still be <4.5:1.
• Custom CSS that targets EUI variables (e.g., --euiColorPrimary) is safe if written without !important and respects the existing flexbox layout.
• In Kibana 7.x themes were static CSS files; custom CSS injected via kibana.yml was often overwritten by upgrades.
• In Kibana 8.x a theme API was introduced, allowing safer variable overrides.
• In Kibana 9.x the CSS‑in‑JS approach makes direct CSS injection fragile and prone to being overridden.

Version‑specific differences

Version	Theme implementation	Custom CSS support
7.x	Static CSS files	Injected via kibana.yml, vulnerable to upgrades
8.x	CSS variables + theme API	Safe to override variables; avoid !important
9.x	CSS‑in‑JS (EUI 8)	Direct CSS injection fragile; overrides may be lost

Recommended steps for your environment

1. Enable high‑contrast mode via Settings > Appearance. Open a sample dashboard.
2. Run an accessibility audit (e.g., Lighthouse or axe) to capture contrast ratios for all UI elements.
3. Identify gaps (icons, chart labels) that fall below 4.5:1.
4. Apply a minimal CSS override that only changes the relevant EUI variable, e.g.:

   .kuiThemeDark {
     --euiColorPrimary: #ffffff; /* higher contrast */
   }
   

5. Verify layout by resizing the viewport and ensuring panels still align correctly.
6. Test screen‑reader navigation (NVDA, VoiceOver) to confirm focus order and reading order remain intact.
7. Document any regressions and iterate on the CSS until all critical elements meet WCAG AA.

What we need to know

Which exact Kibana release are you running? The recommendation for CSS overrides differs between 7.x, 8.x, and 9.x, and the risk of upgrade‑overwrites is higher in 9.x.