Overview

This tool allows you to measure the contrast ratio between any two colors. The contrast ratio is a numerical value that indicates how well the colors can be distinguished by the human eye. The higher the contrast ratio, the better the visibility and readability of the text or graphics.

The tool also shows you the color accessibility rating for each pair of colors, based on the Web Content Accessibility Guidelines (WCAG 2). These guidelines provide standards and recommendations for making web content accessible to people with different visual impairments. The color accessibility rating tells you if the contrast ratio meets the minimum or enhanced criteria for different text sizes and types.

If the contrast ratio or the color accessibility rating is too low, you can use the action buttons to adjust the brightness or lightness of the selected colors until they reach the desired level (AA or AAA). The tool will automatically update the contrast ratio and the color accessibility rating. This way, you can ensure that your web content is accessible and user-friendly for everyone.

Inputs

Each color can be defined in the following ways:

• Using the color picker

• Finding a color by the color code

• Finding a color by the color name

To a find a color by its code, the hex or RGB color codes should be used. The following color code formats are supported:

• Hex (e.g. "#FF0000" or "#FFF")

• RGB (e.g. "RGB(255,0,0)")

The supported RGB codes correspond to the 24-bit system where each component ranges between 0 and 255.

Color Accessibility

One of the challenges of web design is to create content that is accessible and readable by everyone, regardless of their visual abilities. Different people may perceive colors differently, and some may have difficulties distinguishing certain colors due to vision impairments. To address this issue, there are web guidelines that specify the minimum level of color contrast required for different types of content.

The most widely adopted standard is WCAG 2, which defines three levels of color contrast ratings:

• AAA: This is the highest level of color contrast, with a minimum ratio of 7:1 between two colors. This level ensures that the content is readable by people with severe vision impairments, and it is recommended for text, headings, and other important visual elements.

• AA: This is the medium level of color contrast, with a minimum ratio of 4.5:1 between two colors. This level ensures that the content is readable by people with moderate vision impairments, and it is suitable for headings and other visual elements, but not for text.

• A / none: This is the lowest level of color contrast, with no minimum ratio specified. This level means that the color is not used to convey any information or distinguish a visual element, and it should be avoided for any content that requires readability.

Automatic Color Contrast Adjustment

ArtyClick Colors helps you to achieve a desired level of contrast between two colors, based on the WCAG 2 guidelines. You can use this tool to modify one or both of the colors until they meet the contrast ratio for a certain rating, such as AA or AAA. The tool offers 5 different buttons that you can click to perform different actions, depending on the situation:

• Adjusting the second color to the AA rating

• Adjusting the second color to the AAA rating

• Adjusting both colors to the AA rating

• Adjusting both colors to the AAA rating

• Resetting both colors to the originally selected colors

To modify a single color, you can change its hue or brightness by adding or subtracting white or black. This process continues until the color reaches the desired level of contrast with the other color, or until it becomes pure white or pure black. If the contrast level is not achievable by changing only one color, you can activate the auto-adjusting function, which will modify both colors simultaneously to create a balanced combination with the desired contrast.