Dark Mode Checker Online — Free Dark Mode Checker Tool

CodexFuse Team · 2026-10-28T07:17:23.725Z · 10 min read min read

Test dark theme text against WCAG contrast ratings with a free dark mode checker — hex pairs, worked example, and honest limits.

A dark mode checker is a free online tool that tests whether text stays readable on a dark background. You enter a background hex colour and a text hex colour, and it returns a WCAG contrast rating that tells you whether that pairing passes, fails, or only works for large text. It turns a judgement call — "this grey looks fine" — into a number you can defend to a client, a designer, or yourself.

Dark themes fail quietly: a grey that looks elegant on a studio monitor can dissolve on a phone in sunlight or for a reader with low vision. This guide shows how to test a dark palette properly, with a worked example and the limits a checker cannot cover.

Why do dark themes that look good in a mockup fail on a real screen?

Dark themes that look good in a mockup fail on a real screen because mockups are viewed in ideal conditions — a calibrated display, full brightness, and a designer who already knows what the text says — while real readers use dimmed phones, ageing screens, and glare. A colour pairing with a contrast ratio of 3:1 can look crisp in Figma and still be unreadable at 40% brightness on a bus. The gap between those two settings is exactly what contrast testing exists to close.

Three factors widen that gap: dark backgrounds make mid-greys look brighter than they are, small text fails first, and dark mode is often an afterthought — light-mode colours inverted without re-testing.

What does a dark mode checker actually test?

A dark mode checker tests one thing well: the luminance contrast between two colours, expressed as a ratio such as 7.09:1. It compares how much light each colour reflects, then maps the result to the WCAG 2.x bands — AA for normal text at 4.5:1, AA for large text at 3:1, and AAA for normal text at 7:1. That single ratio is the closest thing design has to a pass/fail line for readability.

It does not test font weight, paragraph fatigue, or whether a dark card separates from a dark page. Treat it as the foundation, not the whole review: a passing ratio is necessary, not sufficient.

Worked example: fixing a client dashboard in one pass

Consider fictional designer Sara, who has just delivered a dark analytics dashboard for a logistics client. Two support tickets arrive in week one: night-shift drivers cannot read the small labels, and a dispatcher says the footer notes "disappear" on his monitor. Sara opens the CodexFuse dark mode checker and tests the exact live hex values, rather than guessing from screenshots.

The dashboard background is #1E1E2E. Body text #8B8FA3 scores 5.12:1 — AA, but short of AAA. Headings #F5F5F7 score 15.06:1. The problem is the footer: #64748B on a #0F172A card scores only 3.75:1, failing AA for normal text and passing only for large text — which is why the small print vanished.

Sara's fix is small: she keeps the headings, lifts body text one step brighter, and replaces the footer grey with #E2E8F0 (14.48:1). She re-tests hover and disabled states, and the tickets stop. One untested grey — usually the smallest text — does most of the damage.

How do you use the CodexFuse dark mode checker?

You use the CodexFuse dark mode checker by entering two hex colours and reading the WCAG rating it returns, a process that takes under a minute and needs no account. Open the tool, type or paste the background hex from your design, type or paste the text hex, and check the rating for that pairing. Change one value at a time — brighten the text, darken the background, or both — until the pairing reaches the level you need, then record the winning hex values in your design tokens.

The live tool, verified before writing this guide, works exactly this way: enter the background and text hex colours, then check the WCAG rating. No sign-up, no setup — so test a full palette in one sitting. For how the text itself reads, see this guide on turning dense writing into clear text people actually read.

1. Copy the real hex values: take them from your stylesheet or design file, not from memory or a screenshot colour picker.
2. Test body text first: headings and buttons can wait; the paragraph size your readers actually read matters most.
3. Test every state: hover, focus, disabled, and placeholder text are separate pairings with separate scores.
4. Test on both surfaces: a colour that passes on the page background may fail on a card, modal, or sidebar with a different background.
5. Write down the winners: lock passing hex pairs into your design tokens so a later tweak does not silently reintroduce a failing grey.

What contrast scores should you actually aim for?

For body text in a dark theme, aim for AA at minimum (4.5:1) and AAA (7:1) wherever you can reach it without wrecking the design. AA is the baseline most clients, auditors, and accessibility checklists expect. AAA gives you a margin for dim screens, glare, and readers with low vision — the exact conditions where dark mode is used most, late at night or on the move.

Large text can pass at 3:1 under AA, but do not dim headings to that floor — they will look washed out next to AAA body text. Sara's rule now: body copy at AAA, headings above AAA, nothing meaningful below AA.

Dark mode mistakes that pass a contrast test but still hurt readability

A passing ratio does not guarantee a comfortable read. These are the mistakes that survive a checker and still cost you readers:

• Pure black next to pure white: #000000 with #FFFFFF scores perfectly but can halo and tire the eye; soften both ends slightly instead.
• Thin fonts in dim greys: a 300-weight font at 4.6:1 reads worse than a 400-weight font at the same ratio, especially on low-resolution screens.
• Dark cards on dark pages with no separation: text can pass while the card itself is invisible; check the surface-to-surface contrast too.
• Colour-only meaning: if error, success, or status is shown by colour alone, a passing ratio does not help a colour-blind reader — add an icon or a word.
• Long unbroken paragraphs: dark themes amplify fatigue in dense blocks; short paragraphs and clear headings matter more, not less.

The same principle applies elsewhere: a clean, print-ready business card works because contrast and hierarchy do the work, not decoration.

What a dark mode checker does not do

Honest limits matter here, because a checker can create false confidence. A dark mode checker does not simulate real screens, brightness levels, or vision conditions — it computes a ratio from two hex values. It does not check your light theme, your images, your charts, or text rendered over a photo or gradient, where the background is not a single colour at all.

It also cannot judge taste: two AAA pairings can look refined or harsh. Use the checker to rule out unreadable combinations, then choose between the passing ones on a real phone, at low brightness, outdoors.

From a readable theme to a site that stays readable

A readable theme needs a site that stays up and does not break on update. On CodexFuse, the concrete workflow is: move the site's hosting to CodexFuse, connect business email on the same platform, turn on managed security and backups, and pay with credits only for what you use — no subscription, no server to patch yourself.

When a client reports a readability problem at 11 p.m., you want to fix one hex value and redeploy — not fight a server, a mail outage, or a missing backup. Keep your passing hex pairs with your deployment notes, so the next designer inherits tested colours, not guesses.

Frequently Asked Questions

Is a dark mode checker free to use?

Yes — free, no account required, unlimited use. Test as many pairings as your palette needs in one session.

What is a good contrast ratio for dark mode?

4.5:1 minimum (AA) for body text, 7:1 or higher for AAA. Large headings can pass at 3:1, but captions and labels should not sit below 4.5:1.

Do I need to check both dark and light themes?

Yes. A pairing that passes in one theme usually fails in the other, so test every text colour against every background it appears on, in both themes.

Can a dark mode checker test text over images?

Not reliably — an image has many backgrounds, not one hex value. Test its darkest and lightest areas separately, and add a solid panel or scrim if either fails.

Does passing a contrast test guarantee accessibility?

No. Contrast is one part of accessibility, alongside font size, keyboard navigation, focus states, and not relying on colour alone. A passing ratio still needs real-device testing.

What should I do if my brand grey fails the check?

Keep it for large or decorative uses, and choose a brighter tint of the same hue for body text. Record both, so future edits do not reintroduce the failing pairing.

Check your palette, then ship a site that stays readable

Open the dark mode checker now, paste in your hex values, and work from the smallest text upward. Fix failing greys first, lock passing pairs into your design tokens, and test on a real phone at low brightness.

Then move the finished site to CodexFuse: hosting, business email, security, and backups on one fully managed platform on credits, so the next fix ships without server work getting in the way.