Colour and contrast
The palette was measured before it was used, not after. Every colour pair carrying text on this site was checked against the WCAG contrast formula:
| Use | Measured ratio | Level |
|---|---|---|
| Body text on the page background | 13.83 : 1 | AAA |
| Secondary text on the page background | 6.45 : 1 | AA |
| Coral used as a text colour | 6.24 : 1 | AA |
| White text on the primary button | 7.65 : 1 | AAA |
| Alert text in the hygiene warning | 6.86 : 1 | AA |
A decision worth stating. The brighter coral in this palette measures 4.05:1 on the page background, below the 4.5:1 threshold. Rather than use it for text anyway, it is restricted to decoration — rules, markers and diagram lines — and a darker coral is used wherever a word or a number has to be read. A warm accent colour is the easiest place on a site like this to fail contrast, so it is the place we checked first.
The ear map
An interactive diagram is a common accessibility failure, so this one is built deliberately:
- The markers on the ear are real buttons, reachable with Tab and operable with Enter or Space.
- Each marker has a label naming the position and the number of pieces available for it, so it is announced meaningfully rather than as “button, 12”.
- The drawing itself is marked decorative and hidden from screen readers, because it conveys nothing that the buttons and text do not.
- Below the diagram, the same five positions appear as a plain text list with the same links and the same counts. The graphic is never the only route to anything.
Specification figures are text
Post diameter, post length, weight per piece, back type and healing suitability are given as words and numbers everywhere they appear — including the four-figure bar under every product card. No specification on this site is conveyed by an icon, a colour or a bar length alone. Figures use tabular numerals so that columns line up when compared.
The hygiene return warning
The warning that a piercing earring cannot be returned once opened is never communicated by colour alone. It carries a semantic role, an icon, and the full sentence in text, and it appears in the same form on the product page, in the basket and at checkout.
Keyboard and focus
- Everything interactive is reachable and operable by keyboard.
- Focus is always visible — a solid three-pixel outline in the primary colour, offset from the element, never removed.
- A “skip to content” link is the first thing in the tab order on every page.
- The product card image swap is triggered by focus as well as hover, so the post macro is reachable without a mouse.
Structure, text and motion
- One h1 per page, headings in order, landmarks for header, main, navigation and footer.
- Every meaningful image has alternative text describing what it shows. Decorative images have empty alt text so they are skipped.
- Text reflows without horizontal scrolling down to 320 px wide, and the layout survives 200% zoom.
- Form fields have visible, permanently associated labels — never placeholder text as a substitute — and errors are announced.
- The one moving element on this site is the short looping video of an earring post in the hero. It has no sound, and it is suppressed entirely for anyone whose system requests reduced motion, along with every transition on the site.
Where we know we fall short
Being honest about the gaps is more useful than claiming none. Known limitations:
- The ear diagram is a simplified drawing. It shows position relationships rather than a clinically accurate anatomy, and it represents one ear shape.
- The site has been tested with keyboard navigation and automated tooling, but has not yet been through a full audit with users of assistive technology. That is the most valuable test and it is the one still outstanding.
- Product photography is enlarged so posts and fittings are visible. That helps most people and can mislead about scale — which is why the measured dimensions are always given in text alongside.
Tell us if something does not work
If any part of this site is difficult or impossible for you to use, email support@aajewelleryuk.shop or call +44 7210559084. Describe what you were trying to do and what happened. We will reply within one working day, and if you cannot complete an order on the site we will take it another way rather than leave you stuck.