Accessibility
We believe that community energy — and the digital tools we build — should be accessible to everyone. Here's how our brand colours perform and what we've done to make this site inclusive.
Brand Colours
Our palette is inspired by the overlapping circles of the GCE logo, representing social, environmental and economic justice.
Primary Colours
#0099d4 Links, primary actions #e91e8c Highlights, CTAs #f7941d Accents, buttons #ffc425 Alerts, highlights #006838 Success, nature Neutrals
#1a3a5c Headings, hero backgrounds #333333 Body text #666666 Secondary text #f5f5f5 Backgrounds #ffffff Page backgrounds, text on dark Colour Contrast
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text (AA) and 7:1 for enhanced contrast (AAA). Large text (18pt+) needs at least 3:1.
Try It Yourself
Select foreground and background colours to see how they work together.
Colour Vision Simulation
See how our brand colours appear to people with different types of colour vision deficiency.
Website Accessibility
This website is designed to meet WCAG 2.1 Level AA standards. Here's what we've implemented:
Keyboard Navigation
Full keyboard accessibility with visible focus states throughout the site.
Screen Reader Support
Semantic HTML structure with ARIA labels and landmarks for assistive technologies.
Colour Contrast
All text meets WCAG 2.1 AA standards minimum, with most meeting AAA.
Reduced Motion
Animations respect prefers-reduced-motion settings.
Resizable Text
Text can be resized up to 200% without loss of content or functionality.
Skip Links
Skip to main content link for keyboard users to bypass navigation.
Alt Text
All meaningful images include descriptive alternative text.
Focus Management
Logical focus order and visible focus indicators on all interactive elements.
Technical Details
Semantic HTML
We use proper heading hierarchy (h1–h6), landmarks (nav, main, footer), and semantic elements (article, section) to provide clear document structure for screen readers.
ARIA Implementation
Where HTML semantics aren't sufficient, we use ARIA labels, roles, and properties. Interactive components use appropriate aria-expanded and aria-controls attributes.
Focus Management
All interactive elements are focusable and have visible focus indicators. Focus order follows logical reading order. Skip links allow keyboard users to bypass repetitive content.
Motion & Animation
All animations check for prefers-reduced-motion. The loading animation is skipped entirely when reduced motion is preferred.
Colour Independence
Information is never conveyed by colour alone. Links have underlines, errors have icons and text descriptions, and interactive states have multiple visual indicators.
Testing
We test with keyboard navigation, screen readers (VoiceOver), browser accessibility tools, and automated testing.
Get in Touch
If you have questions about accessibility, need information in an alternative format, or would like to discuss your access requirements, please contact us.
info@glasgowenergy.coop