YOUR TEXT SPECIMEN
Content under test
TEST CONDITION
Observe whether the text remains readable at the selected width, size, and spacing. This preview is a specimen, not a page-conformance test.
COLOR RELATIONSHIPS / 01
Make contrast
work for everyone.
Explore a color pair, understand the thresholds that matter, then carry the decision into the interface—not just the color chip.
01 / COLOR PAIR
Set your colors
The color of the content.
The surface behind the content.
The suggested foreground will preserve the background.
Suggestions move the foreground toward black or white. When the background itself limits the maximum available contrast, the tool will say so.
02 / MEASURE
Contrast result
—:1
Enter both colors or choose a preset to calculate a result.
1:13:14.5:17:121:1
AA · Normal textMinimum 4.5:1—
AAA · Normal textMinimum 7:1—
AA · Large textMinimum 3:1—
AAA · Large textMinimum 4.5:1—
UI / meaningful graphicsMinimum 3:1 vs adjacent color—
Threshold indicators describe only the chosen pair and the stated use. They do not assess typography, focus, meaning, or full-page conformance.
03 / IN CONTEXT
See the relationship at work
Preview the selected pair across headings, body text, links, surfaces, and actions.
No color pair selected.
Enter a foreground and background color, or choose a preset above. The live interface preview appears once both colors are set.
DESIGNING FOR REAL LIFE
Clarity should never be hard to find.
A useful interface respects different ways of seeing, reading, navigating, and understanding information. Contrast is one of the foundations that makes those experiences more resilient.
Explore the principle01 / PRINCIPLEKeep the signal clear.
Choose colors that support the message rather than compete with it.
Example action — no navigation or data submission.
Pair preview activeLive preview
Same foreground, different surfaces
A combination can pass in one place and fail in another. These are representative surfaces, not universal tokens.
i
Check the context. Ratios use the selected sRGB colors. Text size, weight, transparency, images, and surrounding colors also affect readability. Check the rendered page.
COLOR ARCHITECTURE / 02
Build a system,
not just a palette.
Turn one starting color into a useful tonal scale, inspect text contrast at each step, and export tokens you can carry into a real interface.
01 / SOURCE COLOR
Start with one meaningful hue
Generate lighter and darker steps for exploration. The scale uses simple RGB mixing to keep the behavior understandable; it is not perceptually uniform.
This starting hue is an editable example. The 11-step scale and token preview update as you edit a valid color; regenerate to clear the selected shade.
02 / TONAL SCALE
Eleven steps, multiple roles
Select a shade as foreground or background in Contrast Lab. Every swatch also reports its contrast against white and deep slate text.
Tint Base Shade
Select a shade to carry it into Contrast Lab.
03 / PERCEPTION PREVIEW
Check color without relying on color
These illustrative filters help you notice where hue differences may become less distinct. They are not a medical model and do not determine accessibility on their own.
SuccessSaved changes
WarningNeeds attention
InformationRead the note
ErrorCould not continue
Each state keeps its own label.Hue is not the only cue.
04 / DESIGN TOKENS
Portable color decisions
Export the generated scale as custom properties, or download a JSON object for a tool that accepts token data.
Your token preview is waiting.
Enter a base color to inspect the example surface and export its CSS or JSON tokens.
SAMPLE SURFACE
A considered system
Use tokens to make decisions consistent and easier to revise.
READING & REFLOW / 03
Give the content
room to breathe.
Adjust type size, line spacing, and reading width. Test narrow viewports and expanded text spacing.
01 / READING CONTROLS
Change the conditions
14 px28 px
Compact · 1.2Open · 2.2
35 characters90 characters
Text spacing stress preview
Applies wider letter/word spacing and line/paragraph spacing to explore a common reflow stress case.
Example text is ready to test wrapping. Replace it, clear it, or open a .txt/.md file. Export to keep it beyond this tab.
0 characters · 0 words
02 / LIVE SPECIMEN
Your content in context
NARROW VIEW · Observe wrapping and scrollText specimen · Not a conformance test
INTERFACE PATTERNS / 04
Design the state,
not only the shape.
A component is more than its default appearance. Explore the labels, feedback, keyboard cues, and recovery paths that help people understand what happens next.
A / 01
Actions & links
Different priorities need clear visual weight and names that make sense out of context.
A / 02
Forms & instructions
Labels remain visible. Helper text should explain why a field matters or how to complete it.
A / 03
Status & recovery
Never rely on color alone. A status message names the state and gives a next step where possible.
Changes savedYour local preference is up to date.
Needs a second lookReview the contrast of the helper text.
Unable to saveCheck the highlighted field and try again.
A / 04
Focus & orientation
Keyboard users need to see where they are. Move focus with Tab to review the actual focus ring.
Use your keyboard's Tab key to move focus between controls.
01Visible focus→02Understand action→03See feedback
i
These are patterns, not production-ready components. Add semantic HTML, input rules, content, and keyboard support for your feature.
STATIC HTML HEURISTICS / 05
Look closer at
the structure.
Check HTML structure, forms, ARIA, navigation, focus, media, motion, and basic contrast clues. Add CSS/JS for more context. Code is never run and remote files are not fetched.
01 / SOURCE
Inspect HTML
Example source loaded. Choose a sample below to replace it and run a fresh scan. Sample scripts are read as text only; they are never executed.Read sample guide
QUICK START / SAMPLE LIBRARY
Try a guided example
Each choice loads the source and updates findings in one step. Start here before selecting your own files.
Loaded example: Common markup issues. Choose any card to try another scenario.
OR / YOUR OWN PROJECT
Bring in local source
Recommended: scan a folder to include HTML, CSS, and scripts together. You can also load HTML first, then add its related files.
Folder and HTML imports scan automatically. Adding related files requires selecting “Analyze selected source” below. All reading stays in this browser tab.
Scan up to 120 source files (1.5M characters total). Checks use static heuristics; they do not run code or verify layout, runtime behavior, keyboard flow, or screen-reader output.
02 / FINDINGS
Review the signals
—DOM elements
—Findings
—Priority
—Review
⌕Your findings will appear here.
The built-in sample is analyzed on first launch. Replace it with your own markup or clear the source to start fresh.
i
Findings use static heuristics. Color checks are approximate; verify them against the active CSS, rendered page, accessible names, and real interactions.
HUMAN-LED REVIEW / 06
Keep track of
what you reviewed.
Turn broad accessibility intentions into specific review notes. Record what looks good, what needs work, and what still needs attention.
01 / REVIEW ITEMS
Work through the experience
Example review data. Example review only—not findings about your site. Change statuses to start your review, or reset to clear the checklist.
i
Accessibility requires context. Use a real browser, keyboard, assistive technology, and human review alongside these checks.