Accessibility assessment for Queer East

--color-grey: #A2A2A2 is the site's only muted-text colour. It is used 119 times across 60 stylesheets and never reaches the 4.5:1 minimum on any surface it is painted on. Every one of the 858 contrast failures in the audit is this single value.

Changing it is a one-line fix that clears all of them, and it is the most visible change in the programme: category labels, screening times, author bylines, venue cities, footer fine print and the translated film titles all become noticeably more solid.

Measured against #ffffff · #f7f7f7 card surface · #eaeaea chips.

The newsletter, donate and search inputs each set outline:none on :focus-visible with nothing in its place. Measured focus-indicator contrast: zero. The only feedback a keyboard user gets is the text caret.

The site's global focus ring is genuinely good — 2px blue at 8.59:1, clearing even the AAA standard. These three rules simply cancel it. Deleting them restores the ring already designed.

The only boundary marking the newsletter and donate fields is --b, a 0.75px #EAEAEA rule at 1.2:1 against white. The minimum for a control boundary is 3:1. The search input has no boundary at all.

Worth noting how these compound: the fields have a visually hidden label, a near-invisible border and no focus ring — so the placeholder is currently the field's only visible identity, and that sits at 2.55:1 too.

14 rules set text to the muted grey on hover and focus, so interacting with a link drops it from 8.59:1 to 2.55:1 — including the primary “Add to Basket” and “Book” buttons. Scanners never caught these because they only test the resting state.

Item 01 fixes them automatically. The pattern is worth a look though: a hover or focus state should raise contrast, not lower it. If the intent was to dim, something other than colour should carry it.

The inactive icon sits at 2.12:1, and the list glyph is a 0.75px rule at that contrast. More importantly the pressed state changes only the glyph's hue — the button chrome is identical in both states, so the selection does not survive greyscale or high-contrast mode.

Measured — active #0000FF, inactive #A2A2A2 at 2.12:1, both on #EAEAEA. Identical chrome.

The Film Index country dots are #A2A2A2 at 2.18:1 on the land fill and need 3:1. They are also 12px across against a 24px minimum, so circle-radius goes from 6 to 12 — a visible change in the map's density.

Related: Hong Kong and Macau sit 5.5px apart and already render as one blob. Doubling the radius makes that worse, so they need a collision offset or a stroke.

The land, sea and border fills deserve a look independently — #ededed land against #f7f7f7 sea is 1.09:1, and the country borders are 1.16:1. The geography is effectively a flat field right now.

Desktop — markers at 2.18:1

390px — HK and Macau overlap, 5 countries off-screen

Icons and indicators are drawn as background-coloured <span> elements rather than glyphs or SVG. Forced-colors mode strips backgrounds, so the view toggle, the event status dots and every chip fill vanish completely. Text is rescued correctly; the icons are not.

Normal rendering

Forced colors — toggle and chip fills gone

The social, contact and legal links are display:block; width:100% at the small type size, so 12 links stack one per line at 11.6px pitch with zero gap. The measured safe clickable diameter is 0.0px — adjacent targets touch exactly.

Reaching the 24px minimum costs about 12.4px per link, whether by padding or by gap. Twelve links, so roughly 150px of extra footer height on mobile and 107px on desktop. This is the one fix in the whole programme that cannot be made free.

Drawer links are 22px tall at 20.9px pitch with no gap, so their target circles overlap. The audit proposed 12px of padding per link, which would add roughly 155px. The spacing route needs only about 3px per link — roughly 40px across the drawer.

390×844 — 12 of 13 links fail. Pitch 20.9px, needs 24px.

Every checkbox and radio row is a zero-padding label at 20.9px pitch. The real <input> is clipped to 1×1px, so the label is the target. The calendar quick-range rows measure a safe diameter of 0.1px.

Adding around 3px per row inside a container that already scrolls is effectively unnoticeable — though with up to 98 options in the modal it adds roughly 300px of scroll length.

Mobile modal — 98 rows at 20.9px

Desktop popover — 18.6px tall

Card bodies use a fixed height: 157px with -webkit-line-clamp: 2. When a reader applies the standard text-spacing adjustment — a documented AA requirement — titles push out of the clamp and are cut off with no ellipsis. On the programme page one title loses 75px of content and renders as “The Spring Outside of”.

Before — fits, 28px of 28px

Text spacing applied — 75px hidden, no ellipsis

The fix is nearly free. Swapping height for min-height produces zero visual change at default settings — the cards sit in a repeat(4, minmax(0,1fr)) grid, and grid already stretches row siblings to match. A row grows only when a title genuinely needs a third line, and the cards within it stay aligned.

The contact email links overflow their grid column and are cut off by overflow-x: clip at every viewport between 781px and 1338px — exactly where 200% zoom lands a normal desktop window. A maximised 1920px screen at 200% renders submissions@queereast.org.uk as “submissions@queerea”.

One of the two affected links is, with some irony, the Accessibility contact address.

960px — overflows by 94.5px, silently clipped

Adding overflow-wrap: anywhere fixes it — the grid already uses minmax(0, 1fr), so wrapping is all that is missing. A wrapped email address across two lines is a look worth checking though.

The page locks itself to viewport height with overflow: hidden. At the 400% zoom condition the map collapses to 99px tall and the zoom-in control is clipped out of reach, with no scroll to recover it. Since the map is the page's only navigation, the page becomes inoperable.

320×256 — map is 99px, zoom-in clipped

Drawer at the same size — forms take 64%

Two hover behaviours reveal content that overlays other content and cannot be dismissed without moving the pointer. Event card badges cover the bottom 26px of the card image. The archive row thumbnail is a 220×140px panel that follows the cursor, so it can never be hovered off either.

At rest

On hover — badges cover 26px of image

Homepage archive — 220×140px, tracks the cursor

The slide indicators are 8×8px dots 6px apart — a safe clickable diameter of 4px against a 24px minimum. Inactive dots are also #EAEAEA on white, which is 1.2:1 and so effectively invisible.

Transparent padding with background-clip: content-box keeps the painted dot at exactly 8px while the target grows to 24px. The visual stays identical — only the inactive colour needs a decision.

Every font size is an absolute px token, so a reader's browser font-size preference currently has literally no effect on this site. Converting at 16px = 1rem renders identically at default settings — it changes behaviour only for someone who has asked for larger text.

Why it matters: with type doubled, clipped containers jump from 2 to 123 on /venues, because single-line text sits in line-height-height boxes with overflow: hidden. Those need min-height too.

Text at 200% — descenders sliced (“Cambridae”, “Enaland”), nav overlapping

The venue schema has four fields: name, url, city, country. There is nowhere to record step-free access, a hearing loop, an accessible toilet, wheelchair spaces or an access booking contact — so an editor cannot publish it even if they want to. Thirty venues are live with none of it.

A keyword sweep across /venues, /about and an event page for step-free, wheelchair, hearing loop, audio described, relaxed, lift, accessible toilet returned zero hits. BSL, Captioned and Subtitled tags do exist in the CMS — applied to zero events.

For an arts charity this typically carries as much weight as technical conformance. A screen-reader problem can be worked around; not knowing whether the building is enterable cannot.

The map is currently the only way to select a country, and it is a GPU canvas layer with no DOM nodes — so it cannot be reached by keyboard at all. A full tab traversal is 31 stops and none reach a country. The entire visible text of the page is “Select a Country”.

The content already exists: deep-linking ?country=japan renders a correct heading and a working list. Rendering the countries as real links resolves four separate failures at once.

The footer already links to /accessibility. That route returns 404, as does /imprint. The site advertises a statement that does not exist, which reads worse to a reviewer than having no link at all.

Minimal design work — the legal/[slug] template already handles privacy, cookies, terms and shipping. It needs content, not layout. One caveat: those legal pages currently render no heading at all, so the template needs an <h1> adding first.