Why Open Access Collective looks the way it does
Open Access is a collective run by disabled people, so the website has to pass the test its own members would set. Everything here was decided by asking what a screen-reader user, a Deaf member on a phone and a person on their third migraine day this week would each need first.
- Built for
- Disabled residents of Madison and Dane County, and the churches, shops and venues that want to include them.
- Navigation
- Classic top bar. Logo left, pages right, one action. Familiar to every visitor.
- Pages
- Start, ASL & captions, Borrow gear, Walk-throughs, Meetups, Who we are
- Hero
- a short action form as the hero: the one thing most visitors came to do (request a ride, ask for help, register a child) can be done before they scroll, with reassurance beside it. Variants: a = headline, reassurance and a photo on the left with the form as a raised card on the right; b = a tall photo carrying the headline, with the form and reassurance on a plain panel beside it; c = headline beside a photo, then the form laid out as one horizontal booking bar; a short manifesto as the opener: four to six plain declarative lines set very large, one after another, followed by a small closing paragraph and one action. Variants: a = left-aligned lines each sitting on a full-width rule; b = lines stepping in like a staircase with accented lines in the link colour and no rules; c = right-aligned lines with a vertical rule and side label, accented lines underlined with a heavy stroke
Typography
The whole site is set in the Atkinson Hyperlegible family, which the Braille Institute commissioned so that letters low-vision readers confuse (I, l, 1; O, 0; b, d) are drawn deliberately different. The original cut sets the headlines, the newer Next cut sets 19px body text, and the Mono cut sets times and booking details. Using one family on purpose keeps the page calm and predictable.
Color
The blue and gold come from the Disability Pride Flag, deepened until the blue passes AAA against the page in both themes. The page is a faintly green off-white instead of pure white, which many people with light sensitivity and dyslexia find easier for long reading. The dark theme starts from the flag's charcoal and lightens the blue, so it is a separate palette and not an inversion.
Layout and navigation
A classic top bar with six plainly named pages, in the same place on every page, because predictable navigation matters more to keyboard and screen-reader users than novelty. Each page answers one job: booking, borrowing, walk-throughs, meetups, who runs it. Borders are two pixels and focus rings are thick, so the layout survives 200% zoom and high-contrast mode.
The hero
The opener is a short manifesto of five concrete promises set right-aligned against a vertical rule. Each line names something you could check on the day, like a step-free door, captions or a quiet room, so the hero states what the collective does without a slogan. The last line, Disabled-led, is the one underlined, because it is the reason the rest gets done properly.
Calls to action
The main button reads Book ASL or captions, because interpreter booking is the most time-sensitive thing people come here for: ten days' notice for most events. The secondary actions say exactly what happens next, like Borrow a ramp or Book a walk-through, so nobody has to guess where a button leads.
Photography
Photos show disabled people doing ordinary things together: signing across a table, playing wheelchair basketball, talking in a group. We avoided inspiration-style imagery, close-ups of mobility aids without people, and any photo where a disabled person is only being helped.
Accessibility
Body text is 19px with 1.6 line height and a 62-character measure. Every pairing meets WCAG AA and the main text pairings meet AAA. The template respects reduced-motion settings, gives every form field a visible label, and the plain-words summary on the home page follows the Easy Read habit of one idea per sentence.
Type system
- DisplayAtkinson HyperlegibleAtkinson Hyperlegible was drawn for the Braille Institute so that letters which usually look alike (I, l and 1; O and 0; b and d) never get mistaken for one another by low-vision readers.
- TextAtkinson Hyperlegible NextThe 2025 follow-up from the same studio keeps those distinctions but adds the middle weights and tighter spacing that long paragraphs need.
- AccentAtkinson Hyperlegible MonoThe mono cut sets times, room names and booking codes, where every character has to be read correctly the first time.
Colour and contrast
Every text pairing is checked against WCAG 2.2 in both themes.
Light theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 16.29:1 | AAA |
| Body text on cards | Aa | 17.85:1 | AAA |
| Secondary text | Aa | 5.94:1 | AA |
| Links | Aa | 6.88:1 | AA |
| Button text | Aa | 7.54:1 | AAA |
| Accent label text | Aa | 9.62:1 | AAA |
| Text on dark bands | Aa | 16.29:1 | AAA |
| Muted text on dark bands | Aa | 8.43:1 | AAA |
| Text on brand bands | Aa | 7.54:1 | AAA |
| Muted text on brand bands | Aa | 5.03:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 16.1:1 | AAA |
| Body text on cards | Aa | 14.44:1 | AAA |
| Secondary text | Aa | 7.1:1 | AAA |
| Links | Aa | 10.01:1 | AAA |
| Button text | Aa | 10.36:1 | AAA |
| Accent label text | Aa | 12.5:1 | AAA |
| Text on dark bands | Aa | 17.11:1 | AAA |
| Muted text on dark bands | Aa | 8.6:1 | AAA |
| Text on brand bands | Aa | 10.36:1 | AAA |
| Muted text on brand bands | Aa | 5.98:1 | AA |
Most booked
