Contrast-Ratio-Based Color Generation

• US 20200066003A1
• Filed: 08/22/2018
• Published: 02/27/2020
• Est. Priority Date: 08/22/2018
• Status: Active Grant

• Current Assignee: Adobe Inc.
• Original Assignee: Adobe Inc.
• Inventors: Baldwin, Nathan Douglas, Browne, Lindsay Ann, Hunter, Johnny, Wilson, Alan Grant
• Granted Patent: US 10,643,353 B2
• Time in Patent Office: Days
• CPC Class Codes: G06T 11/001 Texturing; Colouring; Generation of texture or colour inpainting G06T5/77
• CPC Class Codes: G06T 2200/24 involving graphical user interfaces [GUIs]

Abstract

In implementations of contrast-ratio-based color generation, a user interface displays on a display device of a computing device, where the user interface includes a background color and content colors of content displayed in the user interface. A color generation module implemented by the computing device receives an input that changes the background color in the user interface. The color generation module can then calculate a brightness value of the background color, calculate target contrast ratios of the respective content colors based on the brightness value of the background color, generate color values for new content colors based on the calculated target contrast ratios of the respective content colors, calculate respective brightness values of the new content colors based on the generated color values for the new content colors, and adjust a saturation and hue of the new content colors based on the calculated respective brightness values of the new content colors.

Claims

1. In a digital medium environment for contrast-ratio-based color generation, a method implemented by a computing device, the method comprising:

displaying a user interface on a display device of the computing device, the user interface including a background color and content colors of content displayed in the user interface;

receiving an input that changes the background color in the user interface;

calculating a brightness value of the background color;

calculating target contrast ratios of the respective content colors based on the brightness value of the background color;

generating color values for new content colors based on the calculated target contrast ratios of the respective content colors;

calculating respective brightness values of the new content colors based on the generated color values for the new content colors; and

adjusting a saturation of the new content colors based on the calculated respective brightness values of the new content colors.

2. The method as recited in claim 1, further comprising:

determining hue values of the respective content colors; and

wherein

the calculating of the contrast ratios of the respective content colors is based on the brightness value of the background color and based on the determined hue values of the respective content colors.

3. The method as recited in claim 1, further comprising:

adjusting a hue of the new content colors based on the calculated respective brightness values of the new content colors.

4. The method as recited in claim 3, wherein the new content colors are scalable based on a hue shift and a saturation shift of the respective new content colors for appearance consistency across multiple user interfaces.

5. The method as recited in claim 1, further comprising:

adjusting a saturation of the new content colors based on the calculated respective brightness values of the new content colors.

6. The method as recited in claim 1, wherein the calculating of the contrast ratios of the respective content colors is based on a color target curve with a multiplier value, the color target curve associating the contrast ratios with the respective content colors across a color spectrum.

7. The method as recited in claim 1, further comprising:

displaying the adjusted new content colors in the user interface contrasted against the background color according to the calculated contrast ratios, wherein one or more of the adjusted new content colors are displayable in conformance with Web Content Accessibility Guidelines (WCAG).

8. The method as recited in claim 1, further comprising:

receiving a brightness value adjustment that changes the background color in the user interface;

recalculating the brightness value of the background color;

recalculating the target contrast ratios of the respective new content colors based on the recalculated brightness value of the background color;

generating other color values for revised content colors based on the recalculated target contrast ratios of the respective new content colors;

calculating respective brightness values of the revised content colors based on the generated other color values for the revised content colors;

adjusting a saturation of the revised content colors based on the calculated respective brightness values of the revised content colors; and

adjusting a hue of the revised content colors based on the calculated respective brightness values of the revised content colors.

9. The method as recited in claim 1, further comprising:

receiving a contrast value adjustment that changes the brightness of the background color in the user interface;

recalculating the brightness value of the background color;

recalculating the target contrast ratios of the respective new content colors based on the recalculated brightness value of the background color;

generating other color values for revised content colors based on the recalculated target contrast ratios of the respective new content colors;

calculating respective brightness values of the revised content colors based on the generated other color values for the revised content colors; and

adjusting a saturation of the revised content colors based on the calculated respective brightness values of the revised content colors.

10. In a digital medium environment for contrast-ratio-based color generation, a method of a color generation module implemented by a computing device, the method comprising:

receiving an input as a background color of a user interface;

calculating a brightness value of the background color;

receiving an additional input as a content color of content in the user interface;

determining a hue value of the content color;

calculating a target contrast ratio of the content color based on the brightness value of the background color and the hue value of the content color;

generating color values for a new content color based on the calculated target contrast ratio of the content color;

calculating a brightness value of the new content color based on the generated color values for the new content color; and

adjusting at least one of a saturation and a hue of the new content color based on the calculated brightness value of the new content color and a hue value of the new content color.

11. The method as recited in claim 10, wherein the new content color is scalable based on a hue shift and a saturation shift of the new content color for appearance consistency across multiple user interfaces.

12. The method as recited in claim 10, wherein the contrast ratio of the content color is calculated as a contrast of the content color against the background color.

13. The method as recited in claim 10, wherein the calculating of the target contrast ratio of the content color is based on a color target curve with a multiplier value, the color target curve associating contrast ratios with respective colors across a color spectrum.

14. The method as recited in claim 10, wherein the adjusted new content color is displayable in the user interface contrasted against the background color according to the calculated contrast ratio, the adjusted new content color displayable in conformance with Web Content Accessibility Guidelines (WCAG).

15. The method as recited in claim 14, wherein the brightness value of the background color is limited to a brightness range that allows for generating content colors to be displayable in conformance with the WCAG 2.0 AA Guidelines.

16. The method as recited in claim 10, wherein the new content color is adjusted over a range of multiple hues of the content color.

17. The method as recited in claim 10, further comprising:

receiving a brightness value adjustment that changes the background color in the user interface;

recalculating the brightness value of the background color;

recalculating the target contrast ratio of the new content color based on the recalculated brightness value of the background color and the hue value of the new content color;

generating other color values for a revised content color based on the recalculated target contrast ratio of the new content color;

calculating a brightness value of the revised content color based on the generated other color values for the revised content color; and

adjusting at least one of a saturation and a hue of the revised content color based on the calculated brightness value of the revised content color and a hue value of the revised content color.

18. The method as recited in claim 10, further comprising:

receiving a contrast value adjustment that changes the background color in the user interface;

recalculating the brightness value of the background color;

recalculating the target contrast ratio of the new content color based on the recalculated brightness value of the background color and the hue value of the new content color;

generating other color values for a revised content color based on the recalculated target contrast ratio of the new content color;

calculating a brightness value of the revised content color based on the generated other color values for the revised content color; and

adjusting at least one of a saturation and a hue of the revised content color based on the calculated brightness value of the revised content color and a hue value of the revised content color.

19. A computing device implemented for contrast-ratio-based color generation, the computing device comprising:

a display device to display a user interface having a background color, the user interface including content colors of content displayed in the user interface;

a processor system configured to execute a color generation module implemented to perform operations comprising to;

receive an input that changes the background color in the user interface;

calculate a brightness value of the background color;

calculate target contrast ratios of the respective content colors based on the brightness value of the background color;

generate color values for new content colors based on the calculated target contrast ratios of the respective content colors;

calculate respective brightness values of the new content colors based on the generated color values for the new content colors; and

adjust at least one of a saturation and a hue of the new content colors based on the calculated respective brightness values of the new content colors.

20. The computing device as recited in claim 19, wherein the color generation module is implemented to:

receive a brightness value adjustment or a contrast value adjustment as a selectable input that changes the background color in the user interface;

recalculate the brightness value of the background color;

recalculate the target contrast ratios of the respective new content colors based on the recalculated brightness value of the background color;

generate other color values for revised content colors based on the recalculated target contrast ratios of the respective new content colors;

calculate respective brightness values of the revised content colors based on the generated other color values for the revised content colors; and

adjust at least one of a saturation and a hue of the revised content colors based on the calculated respective brightness values of the revised content colors and respective hue values of the revised content colors, the adjusted revised content colors being displayable in the user interface.