Accessibility testing : Contrast ratio for text and images of text

Text (including images of text) have a contrast ratio of at least 4.5:1. For text and images that are at least 24px and normal weight or 19px and bold, use a contrast ratio that is at least 3:1.

Language: Java

Framework: Selenium 4

copy
1/​/​Assuming Selenium Web driver and TestNG are added as dependencies in pom.xml23import org.openqa.selenium.By;4import org.openqa.selenium.WebDriver;5import org.openqa.selenium.WebElement;6import org.openqa.selenium.chrome.ChromeDriver;7import org.testng.Assert;89public class ContrastRatioTest {10 11 public static void main(String[] args) {12 13 /​/​Setting system property for chrome driver14 System.setProperty("webdriver.chrome.driver", "path/​to/​chrome/​driver");15 16 /​/​Creating a new instance of Chrome driver17 WebDriver driver = new ChromeDriver();18 19 /​/​Maximizing the browser window20 driver.manage().window().maximize();21 22 /​/​Navigating to the webpage to be tested23 driver.get("https:/​/​www.example.com");24 25 /​/​Assuming the text to be tested is within a paragraph tag with class 'text'26 WebElement textElement = driver.findElement(By.className("text"));27 28 /​/​Getting the background color of the text and converting it to RGB values29 String backgroundColor = textElement.getCssValue("background-color");30 int[] backgroundColorRGB = getRGBValues(backgroundColor);31 32 /​/​Getting the foreground color of the text and converting it to RGB values33 String foregroundColor = textElement.getCssValue("color");34 int[] foregroundColorRGB = getRGBValues(foregroundColor);35 36 /​/​Calculating the contrast ratio37 double contrastRatio = calculateContrastRatio(backgroundColorRGB, foregroundColorRGB);38 39 /​/​Asserting that the contrast ratio meets the requirements40 Assert.assertTrue(contrastRatio >= 4.5, "Contrast ratio for text and images of text is less than 4.5:1");41 42 /​/​Asserting that the contrast ratio for larger text meets the requirements43 if(textElement.getCssValue("font-size").equals("24px") && textElement.getCssValue("font-weight").equals("normal")) {44 Assert.assertTrue(contrastRatio >= 3, "Contrast ratio for text and images of text larger than 24px and normal weight is less than 3:1");45 }46 else if(textElement.getCssValue("font-size").equals("19px") && textElement.getCssValue("font-weight").equals("bold")) {47 Assert.assertTrue(contrastRatio >= 3, "Contrast ratio for text and images of text larger than 19px and bold weight is less than 3:1");48 }49 50 driver.quit();51 }52 53 /​/​Method to calculate contrast ratio54 private static double calculateContrastRatio(int[] backgroundColorRGB, int[] foregroundColorRGB) {55 double luminance1 = calculateLuminance(backgroundColorRGB);56 double luminance2 = calculateLuminance(foregroundColorRGB);57 double contrastRatio = (luminance1 + 0.05) /​ (luminance2 + 0.05);58 return contrastRatio;59 }60 61 /​/​Method to calculate luminance62 private static double calculateLuminance(int[] rgbValues) {63 for(int i=0; i<rgbValues.length; i++) {64 rgbValues[i] = rgbValues[i] /​ 255;65 if(rgbValues[i] <= 0.03928) {66 rgbValues[i] = rgbValues[i] /​ 12.92;67 }68 else {69 rgbValues[i] = Math.pow(((rgbValues[i] + 0.055)/​1.055), 2.4);70 }71 }72 return (0.2126 * rgbValues[0]) + (0.7152 * rgbValues[1]) + (0.0722 * rgbValues[2]);73 }74 75 /​/​Method to convert CSS color value to RGB values76 private static int[] getRGBValues(String cssColorValue) {77 int[] rgbValues = new int[3];78 String[] commaSeparatedValues = cssColorValue.replaceAll("[a-zA-Z() ]", "").split(",");79 for(int i=0; i<3; i++) {80 rgbValues[i] = Integer.parseInt(commaSeparatedValues[i]);81 }82 return rgbValues;83 }84 85 /​*86 /​/​Code to connect to remote client with desired capabilities87 public static void remoteClient() {88 /​/​Assuming the remote client is a Sauce Labs instance89 DesiredCapabilities caps = DesiredCapabilities.chrome();90 caps.setCapability("username", "your_Sauce_Labs_username");91 caps.setCapability("accessKey", "your_Sauce_Labs_access_key");92 caps.setCapability("platform", "Windows 10");93 caps.setCapability("version", "latest");94 RemoteWebDriver driver = new RemoteWebDriver(new URL("https:/​/​ondemand.saucelabs.com/​wd/​hub"), caps);95 96 /​/​Rest of the code to be run similar to local test97 }98 */​99}

Language: Python

Framework: Selenium 4

copy
1#Assumption: We are testing the contrast ratio for text and images of text on a website2#Assumption: We have a webpage with different text and image elements34from selenium import webdriver5from selenium.webdriver.common.keys import Keys6from selenium.webdriver.common.desired_capabilities import DesiredCapabilities78#Set desired capabilities for remote testing9capabilities = DesiredCapabilities.CHROME.copy()10capabilities['platform'] = "WINDOWS"11capabilities['version'] = "10"1213#Connect to remote client for testing14driver = webdriver.Remote(command_executor='http:/​/​localhost:4444/​wd/​hub', desired_capabilities=capabilities)1516#Using local driver17#driver = webdriver.Chrome()1819#Go to the website where we will be testing the contrast ratio20driver.get("https:/​/​www.example.com")2122#Assumption: We have a list of text and image elements on the webpage23elements = driver.find_elements_by_css_selector(".text,.image")2425#Loop through each element and check if contrast ratio is at least 4.5:1 or 3:126for element in elements:27 font_size = element.value_of_css_property("font-size")28 font_weight = element.value_of_css_property("font-weight")29 color = element.value_of_css_property("color")30 background_color = element.value_of_css_property("background-color")31 contrast_ratio = get_contrast_ratio(color,background_color)32 if (font_size >= "24px" and font_weight == "normal" and contrast_ratio < 4.5) or (font_size == "19px" and font_weight == "bold" and contrast_ratio < 3):33 print("Failed: Contrast ratio for element {0} is less than required".format(element.get_attribute("id")))34 else:35 print("Passed: Contrast ratio for element {0} is sufficient".format(element.get_attribute("id")))36 37#Function to calculate contrast ratio38def get_contrast_ratio(color1,color2):39 r1,g1,b1 = get_rgb_values(color1)40 r2,g2,b2 = get_rgb_values(color2)41 l1 = get_luminance(r1,g1,b1)42 l2 = get_luminance(r2,g2,b2)43 if l1 > l2:44 return (l1+0.05)/​(l2+0.05)45 else:46 return (l2+0.05)/​(l1+0.05)47 48#Function to get RGB values from color string49def get_rgb_values(color):50 color = color.strip("rgba()")51 r,g,b = color.split(",")52 return int(r),int(g),int(b)53 54#Function to get luminance from RGB values55def get_luminance(r,g,b):56 r = adjust_gamma(r/​255)57 g = adjust_gamma(g/​255)58 b = adjust_gamma(b/​255)59 return 0.2126 * r + 0.7152 * g + 0.0722 * b60 61#Function to adjust gamma value for luminance calculation62def adjust_gamma(value,gamma=2.2):63 return pow(value,1/​gamma)

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