Accessibility testing : Color contrast for graphics and UI components

Color contrast for graphics and interactive UI components must be at least 3:1 so that different parts can be distinguished.

Language: Java

Framework: Selenium 4

copy
1/​/​Assuming the web application is launched and the home page is loaded2/​/​Assuming the graphics and UI components are already present on the page345import org.openqa.selenium.By;6import org.openqa.selenium.WebDriver;7import org.openqa.selenium.WebElement;8import org.openqa.selenium.chrome.ChromeDriver;9import org.openqa.selenium.remote.DesiredCapabilities;10import org.openqa.selenium.remote.RemoteWebDriver;11import java.net.URL;1213public class ColorContrastTesting {1415 public static void main(String[] args) throws Exception {1617 /​/​ Connecting to remote client with desired capabilities1819 DesiredCapabilities capabilities = DesiredCapabilities.chrome();20 WebDriver driver = new RemoteWebDriver(new URL("http:/​/​localhost:4444/​wd/​hub"), capabilities);2122 /​/​ If running locally, use this instead of above code to use local driver 23 /​/​ WebDriver driver = new ChromeDriver();2425 /​/​ Launching the web application26 driver.get("https:/​/​www.example.com/​");2728 /​/​Locating graphics and UI components 29 WebElement graphics1 = driver.findElement(By.id("graphics-one"));30 WebElement graphics2 = driver.findElement(By.id("graphics-two"));31 WebElement UiComponent1 = driver.findElement(By.id("UI-Component-one"));32 WebElement UiComponent2 = driver.findElement(By.id("UI-Component-two"));3334 /​/​ Getting the color of graphics and UI components35 String graphics1Color = graphics1.getCssValue("color");36 String graphics2Color = graphics2.getCssValue("color");37 String UiComponent1Color = UiComponent1.getCssValue("color");38 String UiComponent2Color = UiComponent2.getCssValue("color");3940 /​/​Calculating the color contrast ratio41 double graphicscontrastRatio1 = calculateContrastRatio(graphics1Color, "white");42 double graphicscontrastRatio2 = calculateContrastRatio(graphics2Color, "white");43 double UiComponentcontrastRatio1 = calculateContrastRatio(UiComponent1Color, "white");44 double UiComponentcontrastRatio2 = calculateContrastRatio(UiComponent2Color, "white");4546 /​/​Asserting the color contrast ratio for graphics and UI components with the expected ratio of 3:147 assert graphicscontrastRatio1 >= 3.0 : "The contrast ratio for graphics1 is less than 3:1";48 assert graphicscontrastRatio2 >= 3.0 : "The contrast ratio for graphics2 is less than 3:1";49 assert UiComponentcontrastRatio1 >= 3.0 : "The contrast ratio for UI component1 is less than 3:1";50 assert UiComponentcontrastRatio2 >= 3.0 : "The contrast ratio for UI component2 is less than 3:1";5152 /​/​Closing the browser53 driver.quit();54 }5556 public static double calculateContrastRatio(String color1, String color2) {57 int[] rgba1 = getRGB(color1);58 int[] rgba2 = getRGB(color2);59 double l1 = getLuminance(rgba1);60 double l2 = getLuminance(rgba2);61 double ratio = (Math.max(l1, l2) + 0.05) /​ (Math.min(l1, l2) + 0.05);62 return Math.round(ratio * 10) /​ 10.0;63 }6465 public static int[] getRGB(String color) {66 /​/​Hex to RGB conversion67 String hex = color.replace("rgb(", "").replace(")", "");68 String[] rgb = hex.split(",");69 int[] result = new int[3];70 result[0] = Integer.parseInt(rgb[0].trim());71 result[1] = Integer.parseInt(rgb[1].trim());72 result[2] = Integer.parseInt(rgb[2].trim());73 return result;74 }7576 public static double getLuminance(int[] rgb) {77 /​/​ RGB to Luminance conversion78 double R = rgb[0] /​ 255.0;79 double G = rgb[1] /​ 255.0;80 double B = rgb[2] /​ 255.0;81 double Rlinear = (R <= 0.03928) ? R/​12.92 : Math.pow((R+0.055)/​1.055, 2.4);82 double Glinear = (G <= 0.03928) ? G/​12.92 : Math.pow((G+0.055)/​1.055, 2.4);83 double Blinear = (B <= 0.03928) ? B/​12.92 : Math.pow((B+0.055)/​1.055, 2.4);84 double L = 0.2126 * Rlinear + 0.7152 * Glinear + 0.0722 * Blinear;85 return L;86 }87}88

Language: Python

Framework: Selenium 4

copy
1#Assumptions: 2#1. The web application being tested is running on a local server 3#2. The web application has a graphics and interactive UI components 4#3. The webdriver for Chrome is installed on the local machine 56#Import Required Libraries78from selenium import webdriver910#Create New Instance of Chrome Driver11driver = webdriver.Chrome(executable_path='./​chromedriver')1213#Connect to Remote Client with Desired Capabilities14desired_caps = {15 'browserName': 'chrome',16 'chromeOptions': {17 'mobileEmulation': {18 'deviceName': 'iPhone X'19 }20 }21}22driver = webdriver.Remote(23 command_executor='http:/​/​127.0.0.1:4444/​wd/​hub',24 desired_capabilities=desired_caps25)2627#Open the Web Application28driver.get('http:/​/​localhost:8000')2930#Get the Background Color of the Graphics and UI Components31graphics_background_color = driver.find_element_by_css_selector('.graphics').value_of_css_property('background-color')32ui_background_color = driver.find_element_by_css_selector('.ui-components').value_of_css_property('background-color')3334#Calculate the Color Contrast between the Background Colors35graphics_contrast = background_color_contrast(graphics_background_color, '#FFFFFF')36ui_contrast = background_color_contrast(ui_background_color, '#FFFFFF')3738#Assert if the Contrast Ratio is at Least 3:139assert graphics_contrast >= 340assert ui_contrast >= 34142#Close the Browser43driver.quit()

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