Lattice Grid Buy a licence

demo D112

High contrast, and why it is not just dark

Borders at 6.1:1 against 1.3:1, and drawn cell edges

WCAG 1.4.11

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

<div id="grid" style="height: 540px"></div>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    selection: 'multiple',
    theme: 'high-contrast',
    columns: [
      { field: 'service', title: 'Service', layout: { pin: 'start', width: 140 } },
      { field: 'team', title: 'Team', filter: { type: 'set' } },
      { field: 'owner', title: 'Owner', filter: { type: 'set' } },
      { field: 'tier', title: 'Tier', cell: { decoration: 'pill', variant: { map: { gold: 'warning', silver: 'neutral', bronze: 'info' } } } },
      { field: 'state', title: 'State', cell: { decoration: 'dot', variant: { map: { healthy: 'success', degraded: 'warning', failing: 'danger', unknown: 'neutral' } } } },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'active', title: 'Active', type: 'boolean' },
      { field: 'deprecated', title: 'Deprecated', type: 'boolean' },
      { field: 'version', title: 'Version', layout: { width: 100 } },
    ],
    rows,  // 5,000 service records
  });
</script>

Meeting WCAG contrast with a dedicated high-contrast theme

A high-contrast theme is not the dark theme with the brightness turned up. It is a separate token set built against WCAG 1.4.11’s non-text contrast requirement, so borders, focus rings and cell edges hold a ratio a dark theme never targets. Lattice Grid’s dark theme draws its row and column dividers at roughly 1.3:1 against the background, enough to read as structure when a viewer has full colour vision and normal contrast sensitivity, but well short of what a low-vision user needs to find a cell boundary. Set theme: 'high-contrast' and the same dividers move to 6.1:1, with every cell edge drawn explicitly rather than implied by alternating row colour, because relying on zebra-striping to signal a boundary fails the moment the striping itself sits below threshold. A developer reaches for this theme when building for a procurement requirement that names WCAG 2.1 AA, or for a user base that has already told you the default theme is not enough: trading floors, control rooms, and public-sector dashboards are the common cases. The theme swaps CSS custom properties rather than adding a stylesheet, so switching at runtime costs a token update and repaint, not a rebuild of the grid’s DOM, and it composes with density and reduced-motion settings already in place on the page.

Does Lattice Grid meet WCAG contrast requirements out of the box?

The default light and dark themes are tuned for readability but do not target the WCAG 1.4.11 non-text contrast minimum on structural elements such as cell borders. The high-contrast theme does: borders and focus indicators are drawn at 6.1:1 rather than the roughly 1.3:1 of the dark theme, with cell edges drawn rather than implied, satisfying the requirement without a custom stylesheet.

Related demos