By Accessibility Advocate

Your Landing Page Roast 🔥

https://pawpal-colorlib.pages.dev

Accessibility compliance score

47/ 100

Fails A

WCAG 2.1 weighted

Verdict

This landing page's accessibility shortcomings are severe, particularly regarding color contrast, which excludes users with visual impairments from engaging with critical content. Keyboard navigation is entirely deficient, effectively shutting out users with motor disabilities and hindering the experience for assistive technology users. The lack of focus indicators and poor heading structure suggest that even basic navigational elements have been neglected.

Visual impairment

Insufficient color contrast ratios render key information inaccessible, preventing users from reading vital content.

Motor impairments

The absence of focus indicators and keyboard navigation fails to accommodate those who rely on keyboard interactions.

Cognitive differences

Inconsistent heading structure and navigational cues may confuse users with cognitive impairments, disrupting their understanding of content.

Screen reader users

A skipped heading level and unlabelled navigation landmarks make it challenging for screen reader users to traverse the page effectively.

Where the site fails

You've skipped a heading level. That's a huge oversight.
major
Semantics
Skipping heading levels disrupts the logical flow for assistive technologies, creating confusion.
How to fix
Insert an h3 before this h4 to maintain proper heading structure.
The structure here is all puff and no substance.
major
Semantics
Meaningful content is hidden beneath inadequate heading structure, hindering screen reader users.
How to fix
Ensure a logical heading hierarchy for all sections.

Lack of visible focus indicators renders this link inaccessible.
critical
Keyboard
Users navigating by keyboard need clear indication of their current focus. Lack of it is exclusionary.
How to fix
Implement CSS to provide a visible focus indicator.
This button loses users in a sea of invisibility.
critical
Keyboard
The absence of a visible focus indicator misleads keyboard-only users, creating a major accessibility barrier.
How to fix
Ensure visible focus is implemented for keyboard navigation.
This button lacks focus visibility, leaving keyboard users lost.
critical
Keyboard
Without a visible focus indicator, keyboard-only users are cut off from essential navigation.
How to fix
Implement CSS styles to create a visible focus indicator.

Multiple navigation elements need distinct labels.
major
ARIA
Users unable to see multiple navigation landmarks will struggle to differentiate between them.
How to fix
Use aria-labels to uniquely identify each navigation section.
This landmark lacks a necessary label for clarity.
major
ARIA
Without proper labeling, assistive technologies can't convey essential navigation contexts.
How to fix
Add aria-label to clarify the use of this landmark.
Labeling this navigation link is critical for clarity.
major
ARIA
Identifying multiple navigation items is vital for assistive technology users; lack of labels leads to confusion.
How to fix
Add aria-labels to distinctly clarify the function of this navigation item.

Insufficient color contrast harms accessibility.
critical
Contrast
A color contrast ratio of 2.27 is utterly unacceptable for users with visual impairments.
How to fix
Change the background color to ensure at least a 4.5:1 contrast ratio.
This color scheme is a barrier to readability.
critical
Contrast
A contrast ratio of 4.2 fails to meet the essential standards for accessibility.
How to fix
Adjust color to achieve a minimum 4.5:1 contrast ratio.
Low contrast turns this text into an invisibility cloak.
critical
Contrast
A contrast ratio of 3.91 is insufficient for clear communication.
How to fix
Choose a background that elevates this text to at least a 4.5:1 ratio.
This link blends into the background. It's effectively invisible.
critical
Contrast
A contrast ratio lower than 4.5:1 fails to meet fundamental accessibility requirements.
How to fix
Opt for a more contrasting background for this link.
Inadequate contrast dulls user engagement.
major
Contrast
This failure to meet contrast thresholds jeopardizes usability for visually impaired users.
How to fix
Enhance the contrast to ensure readability.
This color scheme is practically designed to be unreadable.
critical
Contrast
A contrast ratio of 3.66 fails to meet minimum standards, blocking access to essential information.
How to fix
Change the background to achieve at least a 4.5:1 contrast ratio.
This text might as well be invisible.
critical
Contrast
With a contrast ratio of 3.66, you're denying users the ability to read vital content.
How to fix
Elevate the contrast to at least 4.5:1 for visibility.
The low contrast here is a textbook example of failure.
critical
Contrast
Users with visual impairments will find this text unreadable, violating accessibility guidelines.
How to fix
Adjust colors for a minimum 4.5:1 contrast ratio.
This is more of a visual barrier than a design choice.
critical
Contrast
With a contrast ratio of 3.66, you forcibly obscure important messaging.
How to fix
Enhance background contrast for better readability.
This text is effectively camouflaged.
major
Contrast
A subpar contrast ratio makes this information inaccessible, limiting engagement.
How to fix
Enhance contrast to meet minimum standards.
This link is invisible to anyone needing to see it.
critical
Contrast
Low contrast prevents users from navigating effectively, creating a significant access issue.
How to fix
Select a contrasting color to meet accessibility criteria.
This logo's text is at risk of disappearing into the background.
major
Contrast
Lack of determined background color for this element results in unpredictable accessibility and readability.
How to fix
Ensure a solid background color is applied for reliable contrast.
This tagline takes accessibility back a decade.
major
Contrast
Inconsistent background colors make the text barely legible for users relying on color for meaning.
How to fix
Adjust background colors to provide sufficient contrast.
This button blends into the shadows, almost as if it’s hiding.
critical
Contrast
A lack of adequate contrast creates barriers that prevent users from accessing vital actions.
How to fix
Increase contrast for this button to at least 4.5:1.
This link's design sacrifices accessibility for aesthetics.
critical
Contrast
Text that fails to meet contrast standards limits usability, particularly for visually impaired users.
How to fix
Revise the hover background to ensure a sufficient contrast ratio.

The animations here ignore users' preferences.
minor
Motion
Users who prefer reduced motion deserve a well-designed experience; this is neglect.
How to fix
Add media queries to respect prefers-reduced-motion settings.
This animation completely disregards user preferences.
minor
Motion
Failing to consider prefers-reduced-motion functionality can alienate users sensitive to motion.
How to fix
Implement reductions for users who prefer less motion.
Motion should enhance, not disrupt user experience.
minor
Motion
Lack of consideration for reduces motion preferences could alienate users sensitive to such effects.
How to fix
Add media queries to properly handle reduced motion preferences.

Accessibility scorecard

Metric	Score
WCAG compliance	0
Semantics	90
Keyboard nav	0
ARIA	85
Contrast	100
Media	100

What’s working

Overall contrast score is acceptable, indicating that text is typically legible against backgrounds.
Some semantic elements are properly used, enhancing content organization.

Critical barriers

Keyboard navigation is entirely lacking, excluding users reliant on keyboard interactions.
Multiple instances of insufficient color contrast violate foundational accessibility guidelines, significantly hindering engagement.

Change the background color to ensure at least a 4.5:1 contrast ratio.
Adjust color to achieve a minimum 4.5:1 contrast ratio.
Choose a background that elevates this text to at least a 4.5:1 ratio.
Insert an h3 before this h4 to maintain proper heading structure.
Use aria-labels to uniquely identify each navigation section.
Implement CSS to provide a visible focus indicator.
Add media queries to respect prefers-reduced-motion settings.
Opt for a more contrasting background for this link.
Enhance the contrast to ensure readability.
Change the background to achieve at least a 4.5:1 contrast ratio.
Elevate the contrast to at least 4.5:1 for visibility.
Adjust colors for a minimum 4.5:1 contrast ratio.