Designing so that the accessible version is the only version
In the United States an inaccessible website is a legal exposure rather than a matter of taste, and that changes design instead of adding a checklist to it. Contrast, focus states, target size, motion and form layout become constraints on the visual system. Designed in, they cost almost nothing. Retrofitted, they mean redrawing the thing.
Nearly every American business that has dealt with this got there the expensive way: a design was approved, built, launched, and then had to be made accessible. What arrives at that point is not design work, it is repair, outlines bolted onto components drawn without them, colors nudged until they pass and no longer belong to each other, a widget dropped in to claim the problem is handled.
The failure begins in the design file, and it is always the same shortlist. Light gray body text on white, because it looked refined on a calibrated monitor. Thin weights at small sizes. Hover as the only signal that something is interactive. Focus rings switched off early because they interrupted the mockup. A carousel that moves on its own. Placeholder text standing in for labels, and errors shown only by turning a field red. Together they make a design that cannot be fixed without being redrawn, which is why remediation so often satisfies an audit and embarrasses the brand.
When this work makes sense
Questions worth asking any supplier
Was the palette tested for contrast before it was approved, because a brand color that fails as text is better discovered during design than after signoff?
Does every interactive element have a designed focus state, because a focus ring the developer invents is one nobody in the brand team has seen?
Are touch targets sized and spaced deliberately, because target size is decided by layout and is painful to change once the grid is set?
Does the design honor a reduced-motion preference, because animation the visitor did not ask for is the issue users notice immediately?
Are error and empty states designed alongside the happy path, because form errors conveyed only by color are the most common finding in any audit?
Deliverables
A color system where every approved text and background pairing has been measured, with the failures documented rather than quietly used anyway
A type scale with minimum sizes and weights defined, so small print is a decision rather than a habit
Designed focus, hover, active, disabled and error states for every interactive component
Target sizing and spacing rules that hold on a phone held one-handed, not only on a desktop mockup
Motion specified with a reduced-motion alternative, including what stops and what merely slows
Form patterns with visible labels, error text next to the field, and errors conveyed by more than color
A design system handed over with the accessibility rules written into it, so the next designer inherits them
Built with
Process
We set the palette and the type scale against contrast requirements before a single screen is designed. That sounds procedural and it is the whole difference: it decides early whether your brand color can carry text, whether the secondary gray survives, and whether the button works when disabled. Discovering this at the palette stage costs an afternoon. Discovering it after thirty screens are approved costs the thirty screens. The second thing designed is the focus state, because it is the element most likely to be invented by somebody else if the design file stays silent.
The standard nine stages, discovery, strategy, UX/UI, development, content and SEO, testing, launch, measurement and continuous improvement, apply to every project. The paragraph above is what differs for this one.
What moves the number
Pricing depends on scope, functionality, integrations and content requirements. These are the factors that change it most:
Three ways to end up with an accessible site
Design to the constraint
Fits: Any new site or redesign, and the only route that produces something coherent
Limits: Constrains the palette and type choices early, which some brand teams experience as a loss before they see the result
Remediate an existing design
Fits: Sites that cannot be redesigned now and need the worst exposure closed
Limits: Costs more than designing it in, and the visual result is a compromise between the original intent and what passes
An overlay widget
Fits: Almost nothing, though it is widely sold as a fix
Limits: It leaves the underlying markup as it was, is frequently unhelpful to the people it claims to serve, and has not stopped complaints
Case studies
No published US design case study yet. Our New York office is at 1 Liberty Street, 23rd Floor. We will publish client work when we have permission to name the business and show outcomes that can be evidenced rather than described.
MBGDesk operates from 4 offices in India, United States, United Kingdom, United Arab Emirates. We hold no industry certifications and do not imply otherwise.
Frequently asked questions
Our brand color fails contrast. Do we have to change it?
Not necessarily the color, but where you use it. A brand color that fails as body text can still work as a large heading, a background behind white, a border or an accent. What you cannot do is keep using it for small text and hope. We show you which pairings pass, and the brand decision stays with you.
Do accessibility overlays work?
They do not do what they are sold as doing. An overlay sits on top of the page and tries to correct it at runtime; it does not change the markup underneath, and it is often unhelpful to the people who use assistive technology daily. We would rather fix the design and the code.
Is designing for accessibility more expensive?
Designing for it is close to free, it constrains decisions rather than adding work. Retrofitting is expensive, because every affected component has to be redrawn and every screen using it revisited. The difference is almost entirely a question of when the constraint was introduced, which is why we introduce it at the palette.
Does this make everything look the same?
No, though it rules out a few things that have been fashionable, very light gray text, hairline weights, hover-only affordances, interfaces that hide their structure. Losing those is a smaller loss than it sounds. Contrast, clear hierarchy and visible states are properties of designs people describe as well made rather than as compliant.
What about animation and motion?
Motion is fine, and it should have an off switch the visitor has already set. Operating systems expose a reduced-motion preference, and a design that respects it specifies what happens instead, usually a cut rather than a slide, and no autoplay. The pattern we most often remove is the carousel that moves without being asked.
Who decides whether we are legally exposed?
Your attorney. We are designers, not lawyers, and what applies to your organization depends on facts we are not the right people to assess. What we can tell you is what a design does and does not meet against WCAG, which is the standard most assessments reference, and how much of the gap is design rather than code.
Can you work with our existing design system?
Usually, and the first step is measuring it rather than replacing it. Many systems are further along than their owners think, the colors hold, the type scale is reasonable, and what is missing is the states nobody drew. That is an amendment. A system built on low-contrast grays with no focus treatment is a rebuild, and we will say so early.
Services that connect to this
Talk to us about this
Tell us what you are trying to build and we will come back with scope, approach and an estimate.