Automated technical assessment of 5 publicly accessible pages · Scanned 25 Aug 2026. Inspected 5 of 5 selected pages.
Findings
High
Interactive controls are not keyboard-accessible
A control that responds to clicks (a clickable element or an ARIA widget) cannot receive keyboard focus, so keyboard and switch users cannot operate it.
Component
5 affected pages
40 instances
WCAG WCAG 2.1 SC 2.1.1 Keyboard (Level A)
Ref AJN8DD
Affected pagehttps://www.opera.com/
Elementheader#header > div > div > div:nth-of-type(1) > ul > li:nth-of-type(1)
Accessible nameBrowsers
Opera Browser
Updated
Opera Air
Opera GX
Opera Neon
New
Opera Mini
Downloads
Features
Compare Browsers
Rolemenuitem
Markup<li class="header__main-nav-item header__main-nav-item--dropdown active" role="menuitem">
<a href="/browsers" class="header__main-nav-anchor" data-code="header-nav--browsers" data-menu="Browsers">
<i class="icon-component hover-color" data-icon-name="Browsers" data-icon-type="Header" data-icon-alt="Browsers" data-icon-width="24" style="width: 2.4rem;"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.0215 9.56464V7.5C18.0215 6.67157 17.3499 6 16.5215 6H5.5C4.67157 6 4 6.67… How to fixAdd a tabindex attribute to the interactive control or ensure it has focusable semantics to enable keyboard users to operate it.
High
Hidden elements can still receive keyboard focus
An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.
Component
5 affected pages
14 instances
WCAG WCAG 2.1 SC 2.4.3 Focus Order (Level A)
Ref 3XH3Y5
Affected pagehttps://www.opera.com/
Elementdiv > div > div:nth-of-type(1) > div > span > a
Accessible nameDownload now
Markup<a href="/computer/thanks?ni=stable&os=windows" data-code="download-button" class="button os-windows" data-platform="auto" data-event-action="download_opera" data-event-category="new_floating_header" rel="nofollow noopener" data-alternative="None">
<span class="cta">Download now</span>
</a> How to fixTo fix this issue, ensure that the hidden element is removed from the tab order by setting its 'tabindex' attribute to '-1' or by using the 'display: none' or 'visibility: hidden' CSS properties to completely hide it. Alternatively, make the element visible when it receives focus.
High
Interactive controls are not keyboard-accessible
A control that responds to clicks (a clickable element or an ARIA widget) cannot receive keyboard focus, so keyboard and switch users cannot operate it.
Component
5 affected pages
10 instances
WCAG WCAG 2.1 SC 2.1.1 Keyboard (Level A)
Ref OLI208
Affected pagehttps://www.opera.com/
Elementheader#header > div > div > div:nth-of-type(1) > div > span
Accessible nameDownload now
Rolebutton
Markup<span class="download-button--wrapper download-button--desktop
download-button--full download-button--small " role="button">
<a href="/computer/thanks?ni=stable&os=windows" data-code="download-button" class="button os-windows" data-platform="auto" data-event-action="download_opera" data-event-category="new_floating_header" rel="nofollow noopener" data-alternative="None">
<span class="cta">Download now</span>
</a>
</span> How to fixAdd a tabindex attribute to the span element with role='button' or replace the span with a native button element to make it focusable by keyboard users.
High
Interactive controls are not keyboard-accessible
A control that responds to clicks (a clickable element or an ARIA widget) cannot receive keyboard focus, so keyboard and switch users cannot operate it.
Component
1 affected page
4 instances
WCAG WCAG 2.1 SC 2.1.1 Keyboard (Level A)
Ref Z8CQB8
Affected pagehttps://www.opera.com/
Elementdiv > div:nth-of-type(1) > div > div:nth-of-type(2) > div:nth-of-type(1) > span
Accessible nameDon't have Google Play?
Download the app here
This is a safe downloadfrom opera.com
Rolebutton
Markup<span class="download-button--wrapper download-button--store
" role="button">
<a href="https://app.appsflyer.com/com.opera.browser?pid=operacom&c=webpage" data-code="download-button" class="button os-android" data-platform="auto" data-event-action="opera_mobile_android" rel="nofollow noopener" target="_blank" aria-label="Download now" data-alternative="https://download.opera.com/download/get/?partner=www&nothanks=yes&arch=arm8&product=Android&download_url=">
<img src="https://cdn-production-opera-websit… How to fixUse a native <button>/<a>, or add tabindex="0" plus keyboard event handlers (Enter/Space) to custom controls.
High
Interactive controls are not keyboard-accessible
A control that responds to clicks (a clickable element or an ARIA widget) cannot receive keyboard focus, so keyboard and switch users cannot operate it.
Component
1 affected page
12 instances
WCAG WCAG 2.1 SC 2.1.1 Keyboard (Level A)
Ref H0LKZ9
Affected pagehttps://www.opera.com/
Elementdiv > div > div > div:nth-of-type(2) > div > div
Accessible nameRead more
Rolebutton
Markup<div class="button-component my-8 start-xs button-component__v-arrowed-horizontal" role="button">
<span class="arrow-link arrow-link--long-right text-transform--uppercase text-14 text-md-18">Read more</span>
</div> How to fixAdd a tabindex attribute or replace the div element with a native HTML button element to make the control focusable by keyboard.
High
Interactive controls are not keyboard-accessible
A control that responds to clicks (a clickable element or an ARIA widget) cannot receive keyboard focus, so keyboard and switch users cannot operate it.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 2.1.1 Keyboard (Level A)
Ref 73XI41
Affected pagehttps://www.opera.com/
Elementdiv#who-we-are > div > div > div:nth-of-type(2) > div
Accessible nameRead about Opera
Rolebutton
Markup<div class="button-component my-8 start-xs button-component__v-arrowed-horizontal" role="button">
<a href="/about" class="">
<span class="arrow-link arrow-link--long-right text-transform--uppercase text-14 text-md-18">Read about Opera</span>
</a>
</div> How to fixAdd a tabindex attribute to the interactive element or use a native HTML button element to ensure it can receive keyboard focus.
High
Interactive controls are not keyboard-accessible
A control that responds to clicks (a clickable element or an ARIA widget) cannot receive keyboard focus, so keyboard and switch users cannot operate it.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 2.1.1 Keyboard (Level A)
Ref 3FIZ3G
Affected pagehttps://www.opera.com/
Elementsection:nth-of-type(1) > div > div > div:nth-of-type(1) > div:nth-of-type(2) > span
Accessible nameDownload now
Rolebutton
Markup<span class="download-button--wrapper download-button--desktop
download-button--full " role="button">
<a href="/computer/thanks?ni=stable&os=windows" data-code="download-button" class="button os-windows" data-platform="auto" rel="nofollow noopener" data-alternative="None">
<span class="cta">Download now</span>
</a>
</span> How to fixTo make this control accessible, add a tabindex attribute to the span element with role="button" to enable keyboard focus. Alternatively, consider replacing the span element with a native button element to inherit default focus behavior.
High
Interactive controls must not be nested
Interactive controls must not be nested
Component
1 affected page
2 instances
WCAG WCAG SC 4.1.2
Ref MG3UWG
Affected pagehttps://www.opera.com/
Element.lazy-resolved > .hero__content.block--relative.text-align--center > div > div:nth-child(1) > .cta__container.text-align--center > .download-button--desktop.download-button--full.download-button--wrapper
Accessible nameDownload now
Rolebutton
Markup<span class="download-button--wrapper download-button--desktop
download-button--full " role="button"> How to fixTo fix this issue, ensure that interactive elements such as buttons are not nested inside other interactive elements. In this case, the 'Download now' button has a nested link element. Consider removing the unnecessary interactive element or restructuring the HTML to avoid nesting.
High
Interactive controls must not be nested
Interactive controls must not be nested
Component
1 affected page
2 instances
WCAG WCAG SC 4.1.2
Ref UBNKRR
Affected pagehttps://www.opera.com/
Element.parallax__subsection__text-container.col-lg-6.col-xs-12 > .button-component.my-8.start-xs
Accessible nameRead about Opera
Rolebutton
Markup<div class="button-component my-8 start-xs button-component__v-arrowed-horizontal" role="button">
How to fixTo fix this issue, ensure that interactive controls, such as buttons, are not nested within other interactive elements. Review the HTML structure and refactor it to avoid nesting interactive controls. For example, remove the 'role="button"' attribute from the outer div element if it is not intended to be an interactive control.
High
Interactive controls must not be nested
Interactive controls must not be nested
Component
1 affected page
2 instances
WCAG WCAG SC 4.1.2
Ref EY431G
Affected pagehttps://www.opera.com/
Element.pb-md-48 > .hero__content.block--relative.text-align--center > div > div:nth-child(1) > .cta__container.text-align--center > .download-button--desktop.download-button--full.download-button--wrapper
Accessible nameDownload now
Rolebutton
Markup<span class="download-button--wrapper download-button--desktop
download-button--full " role="button"> How to fixTo fix this issue, ensure that interactive elements such as buttons are not nested inside other interactive elements. In this case, the 'Download now' button has a nested link element. Consider removing the unnecessary interactive element or restructuring the HTML to avoid nesting.
Medium
No skip link to main content
The page offers no bypass mechanism, so keyboard users must tab through the full navigation before reaching the main content on every page.
Component
5 affected pages
10 instances
WCAG WCAG 2.1 SC 2.4.1 Bypass Blocks (Level A)
Ref 2LM5IA
Affected pagehttps://www.opera.com/
Elementhtml > body
Accessible nameBrowsers
Opera Browser
Updated
Opera Air
Opera GX
Opera Neon
New
Opera Mini
Downloads
Features
Compare Browsers
Privacy & Security
About
About Opera
Opera Blog
Help
Download now
language:
Your personal browser
Faster, safer and smarter than default browsers. The Opera browser is fully-featured for privacy, security, and everything you do online.
See more
Download now
Take the Opera browser to go
Complete your browsing experience on mobile with free VPN, Ad Blocker and browser AI. Download Opera for Android or iOS and enjoy smooth browsing anywhere.
Don't have Google Play?
Download the app here
This is a safe downloadfrom opera.com
What can you do in Opera?
Tab Islands
Keep your tabs arranged in separate groups for contextual browsing
…[truncated by Evolize: exceeded D1 value limit]
Markup<body class="">
<header id="header" class="hf hf__header">
<input id="header__switcher" aria-label="Open mobile menu" class="hidden--clip header__switcher" type="checkbox">
<div class="header " role="navigation">
<div class="header__wrapper container-fluid wrapper">
<a class="header__brand" aria-label="Back to Main Page" href="/">
<i class="icon-component icon-multicolor" data-icon-name="Opera (text)" data-icon-type="Logo" data-icon-alt="Opera (text)" data-icon-width="104" style="width: 10.4rem;"><svg w… How to fixAdd a skip link to the main content area, allowing keyboard users to bypass the navigation. The link should be visible when focused and should be the first item in the page's tab order.
Medium
Touch targets are too small on mobile
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Component
5 affected pages
30 instances
WCAG WCAG 2.2 SC 2.5.8 Target Size (Minimum) (Level AA)
Ref YUCA1D
Affected pagehttps://www.opera.com/
Elementdiv > div:nth-of-type(1) > div > ul > li:nth-of-type(1) > a
Accessible nameAd Blocker
Markup<a class="hf__link" href="https://www.opera.com/features/ad-blocker">
<span>Ad Blocker</span>
</a> How to fixIncrease the touch target size of the Ad Blocker link to at least 24x24 pixels to make it easier to activate by touch on mobile devices. Consider adding padding or increasing the font size of the link text to achieve this.
Medium
Touch targets are too small on mobile
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Component
5 affected pages
26 instances
WCAG WCAG 2.2 SC 2.5.8 Target Size (Minimum) (Level AA)
Ref SIW6YD
Affected pagehttps://www.opera.com/
Elementdiv#ditch-the-default > div > div > div:nth-of-type(2) > p > a:nth-of-type(1)
Accessible nameChrome
Markup<a href="https://www.opera.com/opera/compare/chrome">Chrome</a>
How to fixIncrease the size of the touch target to at least 24x24px to make it easier for users to activate by touch.
Medium
Touch targets are too small on mobile
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Component
5 affected pages
10 instances
WCAG WCAG 2.2 SC 2.5.8 Target Size (Minimum) (Level AA)
Ref ZDNIFD
Affected pagehttps://www.opera.com/contact
Elementinput#header__switcher
Accessible nameOpen mobile menu
Markup<input id="header__switcher" aria-label="Open mobile menu" class="hidden--clip header__switcher" type="checkbox">
How to fixIncrease the touch target size of the interactive element to at least 24x24px to make it easier for users to activate by touch on mobile devices.
Medium
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
5 affected pages
10 instances
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref OHR7N8
Affected pagehttps://www.opera.com/contact
Element#footer__lang-selector
Accessible nameLanguage
Markup<select id="footer__lang-selector" class="footer__lang-selector" name="language" aria-label="Language" onchange="this.form.submit()">
How to fixIncrease the contrast between the text color and background color of the language selector to meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3
Medium
Hidden elements can still receive keyboard focus
An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 2.4.3 Focus Order (Level A)
Ref L70Z1S
Affected pagehttps://www.opera.com/
Elementdiv > div:nth-of-type(2) > div:nth-of-type(1) > span > span > a
Accessible nameDownload the app here
Markup<a href="https://download.opera.com/download/get/?partner=www&nothanks=yes&arch=arm8&product=Android&download_url=" data-code="download-button" class="alternative-url" target="_blank" aria-label="Download the app here" rel="nofollow noopener" data-event-action="opera_mobile_android_apk">Download the app here</a>
How to fixKeep this element out of the tab order while its containing region is hidden — remove it from focus (for example tabindex="-1"), or apply the inert attribute to the hidden container where supported. Restore normal focusability when the region becomes visible.
Low
Low-quality alternative text
Alt text looks like a filename, a generic word ("image", "photo"), or is duplicated across unrelated images — it likely does not describe the content.
Component
5 affected pages
20 instances
WCAG WCAG 2.1 SC 1.1.1 Non-text Content (Level A)
Ref FX2YV0
Affected pagehttps://www.opera.com/contact
Elementdiv > div:nth-of-type(2) > div > div:nth-of-type(6) > a > img:nth-of-type(1)
Markup<img data-src="https://cdn-production-opera-website.operacdn.com/staticfiles/assets/images/logo/logo-flat-horizontal.3a48a9c34651.svg" class="hidden-in-darkmode" alt="Opera" style="width: 10.6rem" loading="lazy">
How to fixUpdate the alt text for the images to provide a clear description of their content. For example, instead of using 'Opera' as the alt text, consider using a more descriptive phrase like 'Opera logo' or 'Opera brand image'. Ensure that each image has unique and descriptive alt text to help screen readers and other assistive technologies accurately convey the content to users.
Low
Low-quality alternative text
Alt text looks like a filename, a generic word ("image", "photo"), or is duplicated across unrelated images — it likely does not describe the content.
Component
5 affected pages
20 instances
WCAG WCAG 2.1 SC 1.1.1 Non-text Content (Level A)
Ref NGVRK9
Affected pagehttps://www.opera.com/contact
Elementheader#header > div > div > div:nth-of-type(2) > a > img:nth-of-type(1)
Markup<img src="https://cdn-production-opera-website.operacdn.com/staticfiles/assets/images/logo/logo-flat-horizontal.3a48a9c34651.svg" alt="Opera" width="274" height="100" class="hidden-in-darkmode" style="height: 3rem; width: auto; aspect-ratio: 274/100;" fetchpriority="high">
How to fixUpdate the alt text to describe the content of the images. For example, if the images are logos, the alt text could be 'Opera logo'. If the images are decorative, the alt text could be an empty string or a descriptive phrase such as 'Decorative image'
Low
Touch targets are too small on mobile
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Component
1 affected page
7 instances
WCAG WCAG 2.2 SC 2.5.8 Target Size (Minimum) (Level AA)
Ref QNFD9G
Affected pagehttps://www.opera.com/
Elementdiv > div > div > div:nth-of-type(2) > div > div
Accessible nameRead more
Rolebutton
Markup<div class="button-component my-8 start-xs button-component__v-arrowed-horizontal" role="button">
<span class="arrow-link arrow-link--long-right text-transform--uppercase text-14 text-md-18">Read more</span>
</div> How to fixIncrease the touch target size of the 'Read more' button to at least 24x24px to ensure reliable activation by touch on mobile devices.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref V79I54
Affected pagehttps://www.opera.com/
Element.lazy-resolved > .hero__content.block--relative.text-align--center > div > div:nth-child(1) > .text-level-1.hero__title
Accessible nameFaster, safer and smarter than default browsers. The Opera browser is fully-featured for privacy, security, and everything you do online.
See more
Markup<div class="text-level-1 hero__title">
How to fixTo improve the legibility of the text, consider adjusting the color of the text or background to meet the minimum contrast ratio of 4.5:1 for normal text. You can use online tools to calculate the contrast ratio and select colors that meet the accessibility standards.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref MSNG08
Affected pagehttps://www.opera.com/
Elementh1
Accessible nameYour personal browser
Markup<h1 class="pb3 text-40 text-md-56 font-weight--heading">
Your personal browser
</h1> How to fixTo improve the accessibility of this element, increase the contrast between the text color and the background color. This can be achieved by using a color with a higher contrast ratio, such as a darker or lighter shade, depending on the background color. A contrast ratio of at least 4.5:1 for normal text is recommended.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref K49KCJ
Affected pagehttps://www.opera.com/
Elementsection[data-code="parallax-about-opera"] > .parallax__main-image > .parallax__content > .height-100.wrapper.container-fluid > .height-100.block--relative > .parallax__floating-container--contain.parallax__floating-container > .parallax__floating-header > .parallax__floating-header__item > .title--nocolor.text-md-48.title
Accessible nameDitch the default
Markup<h2 class="title title--nocolor text-40 text-md-48 font-weight--heading mb0">
<span>Ditch</span> the default
</h2> How to fixIncrease the contrast between the text color and the background color to meet the minimum contrast ratio thresholds. Consider using a color contrast analyzer tool to determine the optimal colors. Adjust the CSS styles for the .title class to use a color combination that meets the WCAG 2.1 SC 1.4.3 Contrast (Minimum) guidelines.
Low
Touch targets are too small on mobile
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Component
1 affected page
1 instance
WCAG WCAG 2.2 SC 2.5.8 Target Size (Minimum) (Level AA)
Ref KAC4CC
Affected pagehttps://www.opera.com/
Elementsection:nth-of-type(1) > div > div > div:nth-of-type(1) > div:nth-of-type(1) > a
Accessible nameSee more
Markup<a href="https://www.opera.com/#see-more" data-custom-offset="20">
See more</a> How to fixTo fix this issue, ensure that all interactive controls have a minimum touch target size of 24x24 pixels. Consider increasing the size of the 'See more' link or adding padding around it to meet this requirement.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref H7JO8H
Affected pagehttps://www.opera.com/
Elementa[href$="#see-more"]
Accessible nameSee more
Markup<a href="#see-more" data-custom-offset="20">
See more</a> How to fixTo improve the accessibility of this element, consider adjusting the text or background color to meet the minimum contrast ratio of 4.5:1 for normal text. You can use online tools to calculate the contrast ratio and select colors that meet this requirement.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref 932V4A
Affected pagehttps://www.opera.com/
Element.text-level-2.parallax__text > a:nth-child(1)
Accessible nameChrome
Markup<a href="https://www.opera.com/opera/compare/chrome">Chrome</a>
How to fixIncrease the contrast between the text color and background color to meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3. Consider using a color contrast analyzer tool to determine the optimal colors.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref J9TPWN
Affected pagehttps://www.opera.com/
Elementa[href$="#ditch-the-default"]
Accessible nameAbout Opera
Markup<a href="#ditch-the-default" class="parallax__cta parallax__cta text-18 font-weight--700">
About Opera
</a> How to fixTo improve readability, consider increasing the contrast between the text color and background color of the element with the class 'parallax__cta'. A contrast ratio of at least 4.5:1 for normal text is recommended. You can achieve this by adjusting the CSS styles for the text or background color.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref 2Q1Y8Q
Affected pagehttps://www.opera.com/
Element.title--colored--purple.text-md-48.title
Accessible nameDitch the default
Markup<div class="title title--colored--purple text-40 text-md-48 font-weight--heading mb0">
<span>Ditch</span> the default
</div> How to fixTo improve readability, increase the contrast between the text color and background color. Consider using a color contrast analyzer tool to determine the optimal colors. For this specific element, try adjusting the CSS class 'title--colored--purple' to use a darker or lighter shade that meets the minimum contrast ratio thresholds.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref PCKRX1
Affected pagehttps://www.opera.com/
Element.parallax__floating-header--mobile.col-lg-6.col-xs-12 > .title--colored--purple.mb0.title
Accessible nameDitch the default
Markup<h2 class="text-40 font-weight--heading mb0 title title--colored--purple">
<span>Ditch</span> the default
</h2> How to fixTo improve the legibility of the text, consider increasing the contrast between the text color and the background color. You can do this by changing the text color or the background color to meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3. For example, you could use a darker or lighter shade of the current color to create more contrast.
Low
Touch targets are too small on mobile
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Component
1 affected page
1 instance
WCAG WCAG 2.2 SC 2.5.8 Target Size (Minimum) (Level AA)
Ref VQNKAO
Affected pagehttps://www.opera.com/
Elementdiv#who-we-are > div > div > div:nth-of-type(2) > div
Accessible nameRead about Opera
Rolebutton
Markup<div class="button-component my-8 start-xs button-component__v-arrowed-horizontal" role="button">
<a href="https://www.opera.com/about" class="">
<span class="arrow-link arrow-link--long-right text-transform--uppercase text-14 text-md-18">Read about Opera</span>
</a>
</div> How to fixIncrease the size of the touch target to at least 24x24 pixels to make it easier for users to activate by touch.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref TZ65LK
Affected pagehttps://www.opera.com/
Elementsection[data-code="parallax-about-opera"] > .parallax__main-image > .parallax__content > .height-100.wrapper.container-fluid > .height-100.block--relative > .parallax__floating-container--contain.parallax__floating-container > .parallax__floating-header > .parallax__floating-header__item > .title--nocolor.text-md-48.title > span
Accessible nameDitch
How to fixTo improve the accessibility of this text, consider increasing the contrast between the text color and the background color. This can be achieved by changing the text color or the background color to meet the minimum contrast ratio thresholds as defined by WCAG 2.1 SC 1.4.3. A contrast ratio of at least 4.5:1 for normal text is recommended.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref XEZ7HX
Affected pagehttps://www.opera.com/
Elementsection[data-code="parallax-about-opera"] > .parallax__main-image > .parallax__content > .height-100.wrapper.container-fluid > .height-100.block--relative > .parallax__floating-container--contain.parallax__floating-container > .parallax__cta.text-18.font-weight--700
Accessible nameAbout Opera
Markup<a href="https://www.opera.com/#ditch-the-default" class="parallax__cta parallax__cta text-18 font-weight--700">
About Opera
</a> How to fixIncrease the contrast between the text color and background color of the 'About Opera' link to meet the minimum contrast ratio thresholds as specified in WCAG 2.1 SC 1.4.3. Consider using a color contrast analyzer tool to determine the optimal colors.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref PVWZ3H
Affected pagehttps://www.opera.com/
Element.title--colored--purple.text-md-48.title > span
Accessible nameDitch
How to fixTo improve readability, consider adjusting the color of the text or background to meet the minimum contrast ratio of 4.5:1 for normal text. You can use online tools to calculate the contrast ratio and find suitable color combinations.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref IM7TKM
Affected pagehttps://www.opera.com/
Element.parallax__floating-header--mobile.col-lg-6.col-xs-12 > .title--colored--purple.mb0.title > span
Accessible nameDitch
How to fixTo improve accessibility, consider increasing the contrast between the text color and the background color. You can do this by changing the CSS styles for the span element, such as using a darker or lighter color for the text or background. For example, you could add a CSS rule like `.title--colored--purple span { color: #333; }` to change the text color to a darker gray.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref EV0X2I
Affected pagehttps://www.opera.com/
Element#ditch-the-default > .wrapper.container-fluid > .row > .parallax__subsection__text-container.col-lg-6.col-xs-12 > .text-level-2.parallax__text
Accessible nameOpera offers a complete web experience you can’t get from system defaults such as Chrome, Safari and Edge.
Markup<p class="text-level-2 parallax__text my-24">
How to fixIncrease the contrast between the text color and the background color to meet the minimum contrast ratio thresholds. Consider using a color contrast analyzer tool to determine the optimal colors.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
1 instance
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref GSDJ8I
Affected pagehttps://www.opera.com/
Elementa[href$="about"] > .arrow-link.arrow-link--long-right.text-transform--uppercase
Accessible nameRead about Opera
Markup<span class="arrow-link arrow-link--long-right text-transform--uppercase text-14 text-md-18">Read about Opera</span>
How to fixIncrease the contrast between the text color and background color of the 'Read about Opera' link to meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3. Consider using a color contrast analyzer tool to determine the optimal colors.