Accessibility testing : Color contrast for custom states

When providing custom states for elements (e.g., hover, active, focus), color contrast for those states should be at least 3:1.

Language: Java

Framework: Selenium 4

copy
1/​/​Assuming the application under test is a web application and the page layout is such that custom states for elements are available2/​/​Assuming the Selenium WebDriver JAR files are added to the project build path3/​/​Assuming the required libraries and browser drivers are installed and configured locally4/​/​Assuming the URL of the application under test is known56import org.openqa.selenium.By;7import org.openqa.selenium.WebDriver;8import org.openqa.selenium.WebElement;9import org.openqa.selenium.chrome.ChromeDriver;1011public class AccessibilityTesting {1213 public static void main(String[] args) {1415 /​/​Set the path of the ChromeDriver executable16 System.setProperty("webdriver.chrome.driver", "/​path/​to/​chromedriver");1718 /​/​Create a new instance of the ChromeDriver19 WebDriver driver = new ChromeDriver();2021 /​/​Navigate to the URL of the application under test22 driver.get("https:/​/​www.example.com");2324 /​/​Find the element with custom state, e.g., hover state25 WebElement hoverElement = driver.findElement(By.id("hoverElement"));2627 /​/​Get the background color and foreground color of hover state28 String hoverBgColor = hoverElement.getCssValue("background-color");29 String hoverFgColor = hoverElement.getCssValue("color");3031 /​/​Calculate the contrast ratio32 double contrastRatio = calculateContrastRatio(hoverBgColor, hoverFgColor);3334 /​/​Check if the contrast ratio is at least 3:135 if (contrastRatio >= 3) {36 System.out.println("Color contrast for custom states is at least 3:1");37 } else {38 System.out.println("Color contrast for custom states is less than 3:1");39 }4041 /​/​Close the browser session42 driver.quit();43 }44 45 /​/​Method to calculate the contrast ratio between two colors46 private static double calculateContrastRatio(String color1, String color2) {47 /​/​Assuming the color format is rgb(r, g, b)48 /​/​Get the RGB values of color1 and color249 int r1 = Integer.parseInt(color1.substring(color1.indexOf("(") + 1, color1.indexOf(",")));50 int g1 = Integer.parseInt(color1.substring(color1.indexOf(",") + 1, color1.lastIndexOf(",")));51 int b1 = Integer.parseInt(color1.substring(color1.lastIndexOf(",") + 1, color1.indexOf(")")));52 int r2 = Integer.parseInt(color2.substring(color2.indexOf("(") + 1, color2.indexOf(",")));53 int g2 = Integer.parseInt(color2.substring(color2.indexOf(",") + 1, color2.lastIndexOf(",")));54 int b2 = Integer.parseInt(color2.substring(color2.lastIndexOf(",") + 1, color2.indexOf(")")));5556 /​/​Calculate the luminance of color1 and color257 double l1 = calculateLuminance(r1, g1, b1);58 double l2 = calculateLuminance(r2, g2, b2);5960 /​/​Calculate the contrast ratio61 double contrastRatio = (l1 + 0.05) /​ (l2 + 0.05);6263 return contrastRatio;64 }65 66 /​/​Method to calculate the relative luminance of a color67 private static double calculateLuminance(int r, int g, int b) {68 double Rsrgb = r /​ 255.0;69 double Gsrgb = g /​ 255.0;70 double Bsrgb = b /​ 255.0;7172 double R;73 if (Rsrgb <= 0.03928) {74 R = Rsrgb /​ 12.92;75 } else {76 R = Math.pow(((Rsrgb + 0.055) /​ 1.055), 2.4);77 }7879 double G;80 if (Gsrgb <= 0.03928) {81 G = Gsrgb /​ 12.92;82 } else {83 G = Math.pow(((Gsrgb + 0.055) /​ 1.055), 2.4);84 }8586 double B;87 if (Bsrgb <= 0.03928) {88 B = Bsrgb /​ 12.92;89 } else {90 B = Math.pow(((Bsrgb + 0.055) /​ 1.055), 2.4);91 }9293 double luminance = 0.2126 * R + 0.7152 * G + 0.0722 * B;9495 return luminance;96 }9798 /​/​Code to connect to remote client with desired capabilities99 /​*100 import org.openqa.selenium.remote.DesiredCapabilities;101 import org.openqa.selenium.remote.RemoteWebDriver;102 import java.net.URL;103104 public class AccessibilityTesting {105106 public static void main(String[] args) {107108 /​/​Set the desired capabilities for the remote client109 DesiredCapabilities capabilities = new DesiredCapabilities();110 capabilities.setBrowserName("chrome");111 capabilities.setVersion("91.0");112 capabilities.setCapability("enableVNC", true);113114 /​/​Create a new instance of the RemoteWebDriver115 WebDriver driver = new RemoteWebDriver(new URL("http:/​/​<REMOTE_CLIENT_IP>:4444/​wd/​hub"), capabilities);116117 /​/​Rest of the code remains the same as before118119 driver.quit();120 }121 }122 */​123}

Language: Python

Framework: Selenium 4

copy
1#Assumptions: 2#We are testing a web application - hence Selenium is preferred as the automation testing framework.3#The custom states for elements are defined in CSS style sheets.45# Importing libraries6from selenium import webdriver7from selenium.webdriver.common.desired_capabilities import DesiredCapabilities8import time910# Local driver11driver = webdriver.Chrome(executable_path="path/​to/​local/​chromedriver.exe")1213# Remote driver14# Options = webdriver.ChromeOptions()15# driver = webdriver.Remote(command_executor='http:/​/​<GRID_HOST>:4444/​wd/​hub',16# desired_capabilities=DesiredCapabilities.CHROME, options=Options)1718# navigating to the webpage19driver.get("http:/​/​www.example.com")2021# wait for 5 seconds for the page to load22time.sleep(5)2324# Retrieving all elements with custom states defined in CSS25elements = driver.find_elements_by_css_selector("[class*='active'], [class*='hover'], [class*='focus']")2627# Setting flag value as True initially28flag = True2930# Iterating over all elements with custom states to verify the color contrast31for single_element in elements:32 background = single_element.value_of_css_property("background-color")33 color = single_element.value_of_css_property("color")34 35 # Checking if color contrast for custom states is at least 3:136 if (int(background[4])+int(background[5])+int(background[6])) - (int(color[4])+int(color[5])+int(color[6])) < 3:37 print("Color contrast for " + single_element.tag_name + " is not at least 3:1.")38 flag = False3940# Checking if all custom states satisfy the color contrast requirement41if flag:42 print("All custom states satisfy the color contrast requirement.")

Disclaimer: Following code snippets and related information have been sourced from GitHub and/or generated using AI code generation tools. LambdaTest takes no responsibility in the accuracy of the code and is not liable for any damages.

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Power Your Software Testing with AI and cloud

Test Intelligently and ship faster. Deliver unparalleled digital experiences for real world enterprises.

Start Free Testing