This pairing fails the WCAG 2.1 guidelines at all levels with a contrast ratio of 2.2:1. In the example below the Colour Contrast Analyser tool is used to test the foreground color (black text) against the background (purple). The contrast is sufficient for those who have color deficiencies. This pairing passes the WCAG 2.1 guidelines with a contrast ratio of 8.7:1. In the example below the Colour Contrast Analyser tool is used to test the foreground color (black text) against the background (orange). Viget provides users with a pallet of different types of tints, tones, and shades.īack To Top Examples Good Example of color contrast Use color palettes to find correct color contrast combinations.Warm and cold colors make for the best color contrast.Black text on a white background has the highest readability.If the text is large, a color contrast ratio of 3:1 can be provided.Sufficient color contrast should be provided (at least 4.5:1 ratio) for regular text.Good color contrast increases the user's readability and ensures they have a positive experience when viewing content. Users with color vision impairments or low visibility may find difficulty in viewing an item with low color contrast. Ensuring websites have high enough contrast between the foreground and the background is significant. It can attract users and assist in conveying information.

font size if bold, a contrast ratio of 3:1 can exist.Ĭolor is one of the most important elements of a webpage. If the text is large enough to exceed 18 pt. However, this guideline is not applicable if: Color contrast guidelines indicate that there should be at least a 4.5:1 ratio between the foreground content and the background content. Low contrast colors will make it difficult for visual users to read and/or understand the content (text or images of text) on the page. When using color, it is important to have sufficient contrast between two colors: the background color and foreground color. When color is utilized on a web page, to ensure accessibility, the right color contrast must always be identified and color should never be the only means to convey information. Although color may be a great tool to visually convey information, it may also create accessibility barriers. Color enhances the design and appearance of information on the web.

Color contrast analyzer tool