How do you implement accessible linear design across light and dark modes?

• What WCAG requires for contrast in light and dark mode
• Practical implementation in Linear-style systems

The Web Content Accessibility Guidelines (WCAG), which is the universal standard for the accessibility of digital content, doesn’t require websites or any digital content to offer a dark mode. However, WCAG 2.2, which has been the current version of WCAG since October 2023, requires optimal color contrast regardless of viewing mode.

In WCAG 2.2, Success Criterion 1.4.3 Contrast (Minimum) states that the minimum contrast ratio for normal-sized text as well as images of text is 4.5:1, whereas large text (defined as 18pt or 14pt if bold, which is approximately 24px and 18.66px respectively) is only 3:1. There’s no contrast requirement for text that’s purely decorative, such as a logo. A minimum contrast ratio of 3:1 also applies to visual information that clarifies what user interface elements such as buttons and form controls do.

It’s believed that the next major version of WCAG, currently dubbed WCAG 3, will set specific rules for light and dark modes, whereas in WCAG 2.2, the aforementioned color contrast requirements apply to light mode, dark mode, high-contrast mode, and all other viewing modes.

Most UI component libraries and design kits offer accessible light and dark mode elements/components right out of the box. In addition, most UI libraries (for example, Radix UI, which is the UI library that Linear themselves use) facilitate being able to switch between light and dark mode at will, rather than just detect user preference at the operating system or web browser level, which is suspected to be a consideration in the upcoming WCAG 3.

However, if you’re rolling a custom implementation of the linear design aesthetic, or using a Linear-style UI component library but changing the colors, you’ll want to stick to a strict subset of neutral colors that each have a light and dark variant. Having a brand color, typically used for CTAs (calls to action), is considered acceptable, but Linear itself has forgone this option in recent versions of its website, opting to stick with neutral colors almost exclusively.

While colors that are used together (e.g., a text color on top of a background color) should meet the minimum WCAG 2.2 criterion for color contrast (AA), additional color contrast (e.g., as defined by the AAA criterion) is recommended for both light and dark mode. In any case, the idea is that neutral colors don’t just offer simplicity, they’re also very easy to ‘flip’ when switching between light and dark mode. Brand colors should remain consistent across both modes, but always accessible too.

LogRocket's Galileo AI watches sessions and understands user feedback for you, automating the most time-intensive parts of your job and giving you more time to focus on great design.

See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.

Minimal doesn’t always mean usable. This comparison shows how Linear-style UI keeps contrast, affordances, and structure intact, unlike brutalism’s extremes or neumorphism’s low-clarity depth effects.

As product teams become more data-driven, UX designers are expected to connect design decisions to metrics. But real value comes from interpreting data, questioning assumptions, and bringing human behavior back into the conversation.

Linear design is a minimalist SaaS aesthetic inspired by Linear. Here’s what to use to recreate it — from Radix UI + shadcn/ui ecosystems to Linear-style Figma kits — plus how to structure pages using modular components and an 8px spacing scale.

Teams often use “customer” and “user” interchangeably — until it breaks alignment. Here’s how separating the two clarifies research, prioritization, and messaging across B2C, B2B, and B2B2C products.