What is the best way to use JavaScript to replicate the bootstrap WCAG algorithm for selecting dynamic color schemes?

After transitioning to Bootstrap 5, I observed a unique feature where an algorithm determines the text color for buttons when they are hovered or active.

For instance:

  • For a primary color of black, hovering over the button changes the background to black while the text becomes white.
  • If the primary color is white, the background turns white upon hover with black text.
  • When the primary color is something like green, Bootstrap relies on the min-contrast-ratio variable to make the decision.

As I am developing a theme builder, I would like to replicate this behavior using JavaScript. However, I am unsure of how to execute it. The Bootstrap documentation mentions the use of a WCAG 2.1 algorithm for this purpose, but I have been unable to locate any resources on implementing this algorithm in JavaScript.

I attempted to review the Bootstrap source code, but my limited understanding of SCSS left me perplexed. If anyone could provide guidance on how to achieve this effect, I would greatly appreciate it.

javascriptsassbootstrap-5wcag

Answer №1

When it comes to selecting a color in relation to another color, there is no specific WCAG algorithm available. However, there is an algorithm designed for determining the contrast between two colors, although it requires manual input of the color values. Unfortunately, WCAG does not provide a method for automatically generating a second color based on the first color.

The contrast ratio formula outlined by WCAG may seem straightforward at first:

(L1 + 0.05) / (L2 + 0.05), where

  • L1 represents the relative luminance of the lighter color, and
  • L2 represents the relative luminance of the darker color.

The concept of "relative luminance" adds complexity to the equation:

L = 0.2126 * R + 0.7152 * G + 0.0722 * B with R, G, and B defined as:

  • If RsRGB is less than or equal to 0.04045, then R = RsRGB/12.92; otherwise, R = ((RsRGB+0.055)/1.055) ^ 2.4
  • If GsRGB is less than or equal to 0.04045, then G = GsRGB/12.92; otherwise, G = ((GsRGB+0.055)/1.055) ^ 2.4
  • If BsRGB is less than or equal to 0.04045, then B = BsRGB/12.92; otherwise, B = ((BsRGB+0.055)/1.055) ^ 2.4

where RsRGB, GsRGB, and BsRGB are calculated as:

  • RsRGB = R8bit/255
  • GsRGB = G8bit/255
  • BsRGB = B8bit/255

This process may initially seem daunting, but after some practice, it becomes more manageable. By converting a hex RGB value like #123456 into decimal form and dividing each component by 255, you can obtain the necessary values for the "relative luminance" calculation.

Should you still find yourself struggling, there is another resource available that addresses adjusting color pairs to meet W3C Accessibility standards for ePubs:

Adapt given color pairs to adhere to W3C Accessibility standard for ePubs

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the differences between incorporating JavaScript directly into HTML and writing it in a separate file?

I need help converting this JavaScript embedded in HTML code into a standalone JavaScript file. I am creating a toggle switch that, when clicked, should go to a new page after the transformation. I am looking for the non-embedded version of the function. H ...

javascripthtmljquerycssonclick

`sendNodejs header not being transmitted during connection``

My nodejs application utilizes stomp to connect to a server using websockets. However, I am encountering an issue where the application is failing to send the headers that I have specified. Despite referring to clear documentation and examples on how to in ...

javascriptnode.jswebsocketstomp

The button click event fails to trigger after entering text into an input field

I created a basic calculator. Users can input a value in the designated field and then click on the '+' button. The cursor stays in the input field, allowing users to immediately enter a new value after clicking the '+'. The mouse poi ...

javascripthtmlbuttoninputfocus

Showing only the objects that are marked as true in the component (React)

I have implemented two key React components. One of them is VideoGameList.js, it serves as an export of an array containing multiple objects. const VideoGameList = [ { id: 1, title: "Fire Emblem Engage", src: vg01, releaseDate: ...

javascriptreactjs

Creating a dropdown menu using React库

The API response I received looks like this:- [ { "Product.Name": "Data Migration - Test1", "Product.Id": "8ad0", "Product.Hello__c": { "Value": "First ...

javascriptreactjsarrays

What is the frequency of 'progressEvents' occurring while uploading files via ajax?

Having recently started using ajax uploading, I wanted to include a progress bar to display the uploading process. I implemented a registration function for progressEvent, but unfortunately, it only ran once. This means that my progress bar was not functi ...

javascript

The issue with the stretched-link in Bootstrap 5 is that it is not functioning properly when used with a

I'm having a small issue with the stretched-link feature not working properly with my card. Despite trying everything from the Bootstrap documentation, including removing buttons as they are said to not work well with stretched-links, I still can&apos ...

htmldjangobootstrap-4bootstrap-5

Can Vue.js support two-way data-binding without the use of an input element?

Here is the code snippet that I'm working with: <div id="app"> {{ message }} </div> JavaScript: myObject = {message:"hello"} new Vue({ el: '#app', data: myObject }) When I update myObject.message, the content within th ...

javascriptvue.js

Three.js - Exploring the Significance of "THREE" within the THREE.scene Framework

Just starting out in JavaScript and experimenting with animations using three.js library. I'm trying to grasp the meaning behind: const scene = new THREE.Scene(); Why is the "THREE" necessary in THREE.Scene? Could we not simply write const scene = n ...

javascriptthree.jsscene

What steps can I take to resolve the spawn unknown error when using npx create-next-app in Visual Studio Code (VSCode)?

Every time I attempt to create a new app using either vscode or cmd, I encounter a spawn unknown error. The error message says "Aborting installation. Unexpected error. Please report it as a bug: Error: spawn UNKNOWN". Unfortunately, the installation abo ...

javascriptreactjsgitcmdnext.js

Ways to prevent my website from being accessed through the Uc Browser

Is there a way to prevent my website from functioning on UC Browser using HTML or JavaScript? ...

javascripthtml

Challenging Trigonometry Puzzles in Javascript

In my project, I am creating an interactive application where a group of humans and bacteria engage in a game of chase. However, I encountered a problem where instead of moving directly towards their target, all entities would veer to the left. I attempt ...

javascripthtmltrigonometry

Waiting for the code to execute once the filtering process is completed in Next.js using Javascript

I'm seeking a way to ensure that my code waits for the completion of my filter function before proceeding. The issue arises because my filter function, which incorporates another function called useLocalCompare, causes a delay in execution. This delay ...

javascriptreactjsarraysfilternext.js

Error: The request does not have the 'Access-Control-Allow-Origin' header

As a beginner in post requests, I've been encountering an error when attempting to make a post request. Despite searching for solutions, the answers are too complex for me to grasp how to adjust my code to resolve it. var url = 'http://unturnedb ...

javascriptajaxpostxmlhttprequest

Utilizing Ternary Operators with User Input

In my latest project, I am developing a cutting-edge app that converts text to sound, utilizing input text from react-native-elements along with ternary operators. My main challenge now is figuring out how to validate whether the text input box is empty ...

javascriptreactjsjsonreact-nativereact-native-elements

What steps are involved in making select fields that change dynamically?

There are two fields available for the user to interact with: size and design. Users have the ability to add more instances of these fields as many times as they desire. Illustration: If I choose M for the size, it will display in the console: https://i ...

javascriptreactjsmaterial-ui

What could be causing the missing key value pairs in my JSON parsing process?

I have set up a Rails backend to serve JSON data, such as the example below from 2.json: {"id":2,"name":"Magic","location":"Cyberjaya","surprise_type":"Great","instructions":"test","status":"awesome","pricing_level":3,"longitude":"2.90873","latitude":"101 ...

javascriptruby-on-railsangularjsjson

Is concealing content using Javascript or jQuery worth exploring?

While I have been hiding content using display:none; in css, there are concerns that Google may not like this approach. However, due to the needs of jQuery animations, it has been necessary for me. Recently, I have come across a new method for hiding conte ...

javascriptjqueryhtmlcss

Integrating content from a separate PHP page into the main index PHP page

I can't seem to get the #container1 div on my index.php page to load with the content from another #container2 div on page1.php. It's frustrating because I've checked my file hierarchy and everything seems correct. This is how my files are ...

javascriptphpjqueryhtml

Where can I locate the list of events supported by CKEditor 4?

Looking for the list of available events I attempted to locate the event list in the official documentation, but unfortunately came up short. I resorted to searching through the source code using .fire("/s+") to identify all available events. However, thi ...

javascripteventsckeditor4.x