01
Contrast Lab
Test foreground and background colors with live ratios, WCAG threshold guidance, near-threshold color suggestions, and practical interface previews.
Explore contrastA DESIGN WORKBENCH FOR INCLUSIVE INTERFACES
Make room for
more people.
Review contrast, color systems, typography, component states, and markup in one practical accessibility workspace.
Works in your browser
No account required
Exportable work
CONTRAST LAB / PREVIEW01—06
READABILITY IN CONTEXT
Clarity should
never be hard to find.
never be hard to find.
Color is part of the message. Make sure the message can be read.
Explore the principleCONTRAST RATIO—:1
Example pair
01 / TEST A PAIR02 / REVIEW IN CONTEXT03 / TAKE IT WITH YOU
THE IDEA / 01
Not a magic score. Not a certification badge. A clearer way to investigate, learn, and improve.
INSIDE THE STUDIO / 02
Six ways to look
more closely.
Each workspace solves a specific problem. Use its findings to guide the next review.
02
Color Systems
Generate an 11-step scale, inspect text contrast across shades, simulate common color-vision differences, and export tokens.
Explore color systems03
Type & Reflow
Adjust text size, line height, reading width, viewport presets, and text-spacing stress conditions in a live specimen.
Explore type & reflow04
Component Lab
Explore buttons, fields, links, focus visibility, helper text, errors, and disabled states as working local examples.
Explore components05
Markup Review
Check HTML for common structure, ARIA, form, focus, media, and motion issues. Add CSS/JS files for limited source-level contrast checks.
Explore markup review06
Review Workspace
Record manual review states, capture notes, filter follow-up work, track progress, and export a portable workspace.
Explore the review workspaceA PRACTICAL LOOP / 03
Explore. Apply.
Review. Repeat.
Accessibility depends on context. Use the Studio to guide review, not to declare a product finished.
Start with a color pairInvestigate a decision
Start with colors, typography, a component state, or a snippet of markup you want to understand.
See it in context
Compare representative surfaces and interface examples instead of relying on a number in isolation.
Record what needs attention
Move from a tool result to a human review item. Keep the reason, context, and next action visible.
Export and continue
Take color tokens, review notes, markup findings, or a complete JSON workspace into your next step.
PRODUCT SPECIFICATION / 04
Built for
practical reviews.
Practical browser tools for focused reviews—not a replacement for a full accessibility audit.
PRODUCT TYPE
Browser-based accessibility workbench
Six tools for color, typography, components, markup, and review notes.
SETUP
Opens in your browser
No installation or account required.
YOUR WORK
Edits stay in this tab
Export workspace JSON to keep or move your work.
OUTPUTS
Artifacts you can take away
CSS/JSON color tokens, markup findings in Markdown, review notes, and whole-workspace JSON export.
PRIVACY
No third-party services
Your inputs are analyzed in the browser.
SAMPLE FILES / 07
Start with examples.
Make them yours.
Each tool starts with an example. Replace it, clear it, or use a sample file. Source scripts are read as text and never executed.
Open the sample catalog
01 · Markup issuesKnown warning signals for Markup Review.
02 · Better-structured HTMLA comparison fixture; a quiet scan is not proof of conformance.
03 · Form labelingInputs, labels, instructions, and action-name signals.
04 · Structure and navigationHeading hierarchy, duplicate IDs, links, and data tables.
05 · Typography specimenOptional copy for text size, width, and spacing tests.
06 · Contrast spot checksForeground/background pairs with expected ratios.
07 · Multi-file site folderHTML, CSS, and JavaScript sources for the folder-scan workflow.
LOCAL BY DESIGN / 05
Your work stays
in your hands.
Your colors, notes, and pasted markup stay in this tab. Export a workspace copy when you need to keep it.
No upload pipeline
Color, palette, preview, and markup tools run in your browser. Inputs are not sent to a service. Related CSS/JS files are read only when you select them.
No background saving
Work is kept in this tab only. Closing or refreshing discards unexported changes; export JSON to keep a copy.
Portable outputs
Download reports and tokens, or export/import workspace JSON to continue in another browser or machine.
CLEAR LIMITS / 06
Good signals.
Honest boundaries.
The Studio supports investigation and organization. It is not a substitute for full context-aware accessibility evaluation.
What does a contrast result mean?
It shows the ratio for two selected sRGB colors against common WCAG thresholds. It cannot confirm how colors are used across a site or certify the product.
Is Markup Review a full website scanner?
No. It checks selected source with static heuristics. It does not crawl sites, run code, fetch resources, compute final CSS, or evaluate rendered behavior or semantic context.
Does the Studio certify WCAG conformance?
No. Conformance requires context-aware review of content, keyboard and focus, assistive technology, dynamic states, and applicable criteria. Treat these results as one input.
Does the workspace save automatically?
No. Work stays in this tab and clears on reload or close. Export workspace JSON to keep a copy.
YOUR NEXT DESIGN DECISION
Make the next
detail more inclusive.
Open the workspace, choose one interface question, and start exploring. No account or setup step required.
Enter Accessibility Studio BROWSER-BASED · EXPORTABLE · SOUTHBRIDGE