Does your site declare whether it supports dark mode, light mode, or both?
Declaring color-scheme prevents broken contrast in agent browsers when the user prefers dark mode.
What this signal tests
We check whether your page declares which colour schemes it supports - light, dark, or both. This is done either with a meta name=color-scheme tag in the HTML head, or with a color-scheme property on the :root CSS selector. The declaration tells the browser whether to render its built-in form controls, scrollbars, and dialogs in light or dark styling.
Why it matters for your visibility in AI
Agent browsers driven by AI assistants inherit the user's system preference, which is dark mode for an increasing share of users. If your site renders only in light mode but does not declare it, the browser may apply dark-mode native controls (scrollbars, form inputs, autofill highlights) over your light backgrounds. The result is invisible scrollbars on white pages or grey text on black input boxes - broken contrast that confuses both human users and multimodal AI agents reading screenshots. Multimodal agents (Claude with vision, GPT-4V, Gemini) that screenshot pages to read them have a harder time interpreting layouts with mismatched native UI. Declaring color-scheme is a single line of HTML that resolves it.
Pass criteria at a glance
| Criterion | Passes when |
|---|---|
| color-scheme declared with at least 'light dark' or matching design support. |
How we test it
We parse your HTML head for a meta tag with name=color-scheme and read its content value, accepting light, dark, light dark, or dark light. We also scan your linked CSS for a color-scheme property on the :root or html selector. Either method satisfies the check, and the declared value should match what your design actually supports.
Show technical detection method
Parse <meta name=color-scheme> and stylesheets for :root color-scheme.
If your site fails: how to fix it
- If your site only supports light mode, add <meta name="color-scheme" content="light"> to your HTML head. This tells the browser to render native controls in light styling, avoiding contrast mismatches.
- If your site supports both light and dark themes via CSS media queries or a manual toggle, declare <meta name="color-scheme" content="light dark"> so browsers know to follow the user preference.
- Alternatively, set the property in CSS: :root { color-scheme: light dark; }. This works the same way as the meta tag and may fit better into a CSS-driven design system.
- Test the result by toggling dark mode in your operating system and reloading the page. Native form controls, scrollbars, and autofill highlights should now match your design.
- Re-run the AI Ready Test to confirm the declaration is detected.
Quick facts
| Maturity | EMERGING |
|---|---|
| Weight | low |
| Category | Performance |
Primary sources
Related signals
No related signals listed.
Frequently asked questions
What if I only support light mode?
Declare exactly that: <meta name="color-scheme" content="light">. The signal passes when any valid declaration is present that matches your actual design support. The point is to tell the browser what to do, not to force you to support both.
Will this break my existing design?
No. The declaration only affects the styling of native browser UI (scrollbars, form inputs, dialogs). Your existing CSS continues to render as-is. The change is purely additive and reversible.
Do I need to actually build a dark theme?
No. Declaring color-scheme: light is a valid pass. You only need to build a dark theme if you want to support dark mode in your design. The signal checks that you have a deliberate declaration, not that you support every mode.
Does this affect my Google ranking?
Not directly. It is a relatively new web platform feature and is not part of Core Web Vitals. The benefit is to user experience in agent browsers and screenshot-based AI analysis, plus better contrast for users in their preferred mode.
Run your own scan
Run a free scan and see how your site grades across all 155 AI-readiness signals.