Accessibility is a vital part of Brand Sweden. The contrast between text and background is essential when creating user-friendly interfaces. The contrast standards are established by the Web Content Accessibility Guidelines (WCAG 2.0).
The minimum level of legibility requires a 4.5:1 colour contrast for normal texts, and 3:1 for larger texts. This is equivalent to WCAG Level AA.
This section offers recommendations for the most common combinations of text and background colours, and how to handle text in combination with imagery. Should you need to incorporate new combinations, make sure they meet WCAG 2.0 level AA standards.*
*There are multiple efficient online tools and apps for contrast checking. We recommend this article from Axess Lab for finding a free colour contrast checker.
Colour contrast Text on Sweden Yellow Standard and Sweden Blue Standard background. Text on Black and White background. Text on Grain Yellow and Pale Yellow background. Text on Dawn Blue and Dark Dawn Blue background. Text on Pale Winter Grey 1 and 2 background. Text on Winter Grey background. Text on Dark Winter Grey 1 and 2 background.
Text over image To make sure accesibility requirements are met, we recommend not to place text directly over imagery, illustrations or complex patterns.
Instead, we recommend placing text over a background of a solid colour.
However, if text must be placed over imagery, we recommend the use of a black layer set to at least 70 per cent opacity between text and image, with typography in white.
Dos ✔ Black text over solid White background with image above. ✔ White text over solid Dawn Blue background with image above. ✔ Text over image with minimum 70% opacity overlay, only to be used if previous recommended options are not possible. Don'ts Don't use black text over image without overlay. Don't use white text over image with overlay under 70% opacity (not enough contrast). Don't use colour overlay. {
"slug": "accessibility",
"type": "page",
"theme": "theme-light",
"pageProps": {
"appProps": {
"cookieSettings": {
"cookieBanner": {
"bannerTitle": "<p><strong>Cookies</strong></p>\n",
"bannerText": "<p>Sharing Sweden uses cookies to improve your experience of the website. Read more in our <a href=\"https://cms.sharingsweden.se/cookie-policy\">Cookie policy</a>.</p>\n",
"__typename": "SwedenSettings_SiSettings_CookieSettings_CookieBanner"
},
"settingsButtonText": "Cookie-settings",
"settingsConfirmButtonText": "Confirm settings",
"acceptButtonText": "Accept all cookies",
"rejectButtonText": "",
"settingsText": "<p>A cookie is a small text file stored on your device that allows us to recognise and remember you.</p>\n<p>Sharingsweden.se uses cookies and other data in order to deliver and improve your experience of this website. For instance, we and our partners may use information about you, your devices and your online interactions with us to provide, analyse and improve our services.</p>\n<p>The categories of cookies that we may use are necessary as well as statistics and analytics cookies. Learn more about how we use cookies by reading our <a href=\"https://cms.sharingsweden.se/cookie-policy\">Cookie policy</a>.</p>\n",
"categories": [
{
"id": "cookie_consent_essentials",
"title": "Necessary",
"text": "Necessary cookies are essential for you to browse our website and use its features. We are using cookies to remember your consent. This type of cookie is activated by default and you can only deactivate it by turning off cookies in your browser. ",
"optional": false,
"alwaysCheckedText": "always on",
"hasAccepted": false,
"isCheckedText": "active",
"isNotCheckedText": "inactive",
"__typename": "SwedenSettings_SiSettings_CookieSettings_categories"
},
{
"id": "cookie_consent_statistics",
"title": "Statistics and analytics",
"text": "Analytical cookies are used to measure how often our website is visited and how it is used. We use this information to get a better sense of where our users come from and how they interact with our content. For this, we use third-party cookies, the Google Analytics Cookies. These cookies are deactivated by default. If you choose to activate statistics and analytics cookies, we use IP anonymisation. You can deactivate these cookies at any time. ",
"optional": true,
"alwaysCheckedText": "always on",
"hasAccepted": false,
"isCheckedText": "active",
"isNotCheckedText": "inactive",
"__typename": "SwedenSettings_SiSettings_CookieSettings_categories"
}
],
"__typename": "SwedenSettings_SiSettings_CookieSettings"
},
"fallBackImage": {
"src": null,
"alt": "",
"height": 0,
"width": 0,
"title": null,
"caption": ""
},
"menu": {
"selectLabel": null,
"selectGroupLabel": null,
"mainMenuContent": [
{
"id": 250,
"href": "/the-sweden-brand/",
"title": "The Sweden brand",
"subMenuItems": [
{
"id": 255,
"href": "/the-sweden-brand/brand-strategy/",
"title": "The brand of Sweden as a strategic asset",
"subMenuItems": []
},
{
"id": 329,
"href": "/the-sweden-brand/the-image-of-sweden-abroad/",
"title": "The image of Sweden abroad",
"subMenuItems": []
},
{
"id": 2392,
"href": "/the-sweden-brand/brand-visual-identity/",
"title": "Brand visual identity",
"subMenuItems": [
{
"id": 328,
"href": "/the-sweden-brand/brand-visual-identity/how-to-use-the-identity/",
"title": "How to use the identity"
},
{
"id": 327,
"href": "/the-sweden-brand/brand-visual-identity/design-principles/",
"title": "Design principles"
},
{
"id": 326,
"href": "/the-sweden-brand/brand-visual-identity/brand-marks/",
"title": "Logo and other brand marks"
},
{
"id": 325,
"href": "/the-sweden-brand/brand-visual-identity/colour/",
"title": "Colour"
},
{
"id": 324,
"href": "/the-sweden-brand/brand-visual-identity/accessibility/",
"title": "Accessibility"
},
{
"id": 323,
"href": "/the-sweden-brand/brand-visual-identity/typography/",
"title": "Typography"
},
{
"id": 322,
"href": "/the-sweden-brand/brand-visual-identity/grid/",
"title": "Grid"
},
{
"id": 321,
"href": "/the-sweden-brand/brand-visual-identity/tone-of-motion/",
"title": "Tone of motion"
},
{
"id": 320,
"href": "/the-sweden-brand/brand-visual-identity/illustration/",
"title": "Illustration"
},
{
"id": 319,
"href": "/the-sweden-brand/brand-visual-identity/graphic-element/",
"title": "Graphic element"
},
{
"id": 318,
"href": "/the-sweden-brand/brand-visual-identity/best-practice/",
"title": "Best practice"
}
]
}
]
},
{
"id": 241,
"href": "/promotional-material/",
"title": "Promotional material",
"subMenuItems": [
{
"id": 247,
"href": "/promotional-material/trade-and-talent/",
"title": "Trade and talent",
"subMenuItems": []
},
{
"id": 244,
"href": "/promotional-material/culture-and-lifestyle/",
"title": "Creative industries and culture",
"subMenuItems": []
},
{
"id": 243,
"href": "/promotional-material/democracy-and-governance/",
"title": "Democracy and society",
"subMenuItems": []
},
{
"id": 246,
"href": "/promotional-material/the-swedish-film-selection/",
"title": "The Swedish film selection",
"subMenuItems": []
},
{
"id": 245,
"href": "/promotional-material/image-bank-sweden/",
"title": "Image Bank Sweden",
"subMenuItems": []
},
{
"id": 242,
"href": "/promotional-material/toolkits-social-media-video-and-more/",
"title": "All toolkits, social media, video and more",
"subMenuItems": []
}
]
},
{
"id": 291,
"href": "/calendar/",
"title": "Calendar",
"subMenuItems": []
}
]
},
"footer": {
"copyright": "Copyright © 2025 Swedish Institute",
"linkGroup": [
[
{
"href": "https://cms.sharingsweden.se/about-sharing-sweden",
"name": "About Sharing Sweden"
},
{
"href": "https://cms.sharingsweden.se/contact",
"name": "Contact"
},
{
"href": "https://cms.sharingsweden.se/faq",
"name": "FAQ"
}
],
[
{
"href": "https://cms.sharingsweden.se/news",
"name": "News"
},
{
"href": "https://cms.sharingsweden.se/newsletter",
"name": "Newsletter"
},
{
"href": "https://sharingsweden.se/promotional-material/financial-support-and-how-to-apply",
"name": "Financial support"
}
],
[
{
"href": "https://cms.sharingsweden.se/accessibility",
"name": "Accessibility"
},
{
"href": "https://cms.sharingsweden.se/cookie-policy",
"name": "Cookies policy"
},
{
"href": "https://cms.sharingsweden.se/terms-and-conditions/",
"name": "Terms and conditions of use"
}
]
],
"logos": [
{
"ariaLabel": "Link to sweden.se",
"logo": {
"anchorProps": {
"href": "https://sweden.se/"
},
"imageProps": {
"src": "https://cms.sharingsweden.se/app/uploads/2023/08/sweden_logo.svg",
"alt": "sweden_logo",
"height": null,
"width": null
}
}
},
{
"ariaLabel": "Link to si.se",
"logo": {
"anchorProps": {
"href": "https://si.se/"
},
"imageProps": {
"src": "https://cms.sharingsweden.se/app/uploads/2023/08/si_logo.svg",
"alt": "si_logo",
"height": null,
"width": null
}
}
}
]
},
"skipToContent": null,
"cookieLabel": null,
"previousSlideLabel": null,
"nextSlideLabel": null,
"toolkitApplyButtonText": null,
"searchComponentData": {
"searchComponent": {
"beforeQuery": null,
"afterQuery": null,
"preResultText": null,
"afterResultText": null
},
"searchField": {
"placeholder": "Search social media, video, toolkits and more",
"submitButtonText": "Search",
"label": "search",
"searchPageUri": "/promotional-material/toolkits-social-media-video-and-more/"
},
"hijackData": []
}
},
"post": {
"databaseId": 304,
"title": "Accessibility",
"slug": "accessibility",
"seo": {
"head": "<!-- This site is optimized with the Yoast SEO plugin v24.8.1 - https://yoast.com/wordpress/plugins/seo/ -->\n<title>Accessibility - Sharing Sweden</title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n<link rel=\"canonical\" href=\"https://sharingsweden.se/the-sweden-brand/brand-visual-identity/accessibility/\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"og:title\" content=\"Accessibility - Sharing Sweden\" />\n<meta property=\"og:url\" content=\"https://sharingsweden.se/the-sweden-brand/brand-visual-identity/accessibility/\" />\n<meta property=\"og:site_name\" content=\"Sharing Sweden\" />\n<meta property=\"article:modified_time\" content=\"2023-10-23T17:48:30+00:00\" />\n<meta property=\"og:image\" content=\"https://sharingsweden.se/_next/image?url=http%3A%2F%2Fsharingsweden-backend.c2673.cloudnet.cloud%2Fapp%2Fuploads%2F2023%2F10%2Fcolourcontrast1.png&w=1200&q=90\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:label1\" content=\"Est. reading time\" />\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" />\n<script type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https://sharingsweden.se/the-sweden-brand/brand-visual-identity/accessibility/\",\"url\":\"https://sharingsweden.se/the-sweden-brand/brand-visual-identity/accessibility/\",\"name\":\"Accessibility - Sharing Sweden\",\"isPartOf\":{\"@id\":\"https://sharingsweden-backend.c2673.cloudnet.cloud/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://sharingsweden.se/the-sweden-brand/brand-visual-identity/accessibility/#primaryimage\"},\"image\":{\"@id\":\"https://cms.sharingsweden.se/the-sweden-brand/brand-visual-identity/accessibility/#primaryimage\"},\"thumbnailUrl\":\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast1.png\",\"datePublished\":\"2023-05-12T12:44:47+00:00\",\"dateModified\":\"2023-10-23T17:48:30+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://sharingsweden.se/the-sweden-brand/brand-visual-identity/accessibility/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https://sharingsweden.se/the-sweden-brand/brand-visual-identity/accessibility/#primaryimage\",\"url\":\"https://sharingsweden.se/_next/image?url=http%3A%2F%2Fcms.sharingsweden.se%2Fapp%2Fuploads%2F2023%2F10%2Fcolourcontrast1.png&w=1200&q=90\",\"contentUrl\":\"https://sharingsweden.se/_next/image?url=http%3A%2F%2Fcms.sharingsweden.se%2Fapp%2Fuploads%2F2023%2F10%2Fcolourcontrast1.png&w=1200&q=90\"},{\"@type\":\"WebSite\",\"@id\":\"https://sharingsweden-backend.c2673.cloudnet.cloud/#website\",\"url\":\"https://sharingsweden-backend.c2673.cloudnet.cloud/\",\"name\":\"Sharing Sweden\",\"description\":\"A comprehensive collection of resources to promote Sweden to an international audience\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://sharingsweden.se/search?query={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}</script>\n<!-- / Yoast SEO plugin. -->",
"shareUrl": "https://sharingsweden.se/the-sweden-brand/brand-visual-identity/accessibility/",
"title": "Accessibility - Sharing Sweden"
},
"uri": "/the-sweden-brand/brand-visual-identity/accessibility/",
"type": "page",
"template": {
"__typename": ""
},
"childPages": [],
"acf": {
"order": "20",
"showFeatured": {
"src": "",
"alt": false,
"title": "Accessibility",
"caption": "",
"height": null,
"width": null
},
"hide_in_search": false,
"sidebar_menu": [
{
"ID": 25759,
"post_author": "4",
"post_date": "2024-10-03 14:29:36",
"post_date_gmt": "2024-10-03 12:29:36",
"post_content": " ",
"post_title": "",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "25759",
"to_ping": "",
"pinged": "",
"post_modified": "2024-10-03 14:29:36",
"post_modified_gmt": "2024-10-03 12:29:36",
"post_content_filtered": "",
"post_parent": 248,
"guid": "https://cms.sharingsweden.se/?p=25759",
"menu_order": 1,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 25759,
"menu_item_parent": "0",
"object_id": "257",
"object": "page",
"type": "post_type",
"type_label": "Page",
"url": "https://cms.sharingsweden.se/the-sweden-brand/brand-visual-identity/",
"title": "Brand visual identity",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": ""
},
{
"ID": 448,
"post_author": "4",
"post_date": "2024-10-03 14:29:36",
"post_date_gmt": "2023-06-13 15:12:23",
"post_content": " ",
"post_title": "",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "448",
"to_ping": "",
"pinged": "",
"post_modified": "2024-10-03 14:29:36",
"post_modified_gmt": "2024-10-03 12:29:36",
"post_content_filtered": "",
"post_parent": 257,
"guid": "https://cms.sharingsweden.se/?p=448",
"menu_order": 2,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 448,
"menu_item_parent": "0",
"object_id": "295",
"object": "page",
"type": "post_type",
"type_label": "Page",
"url": "https://cms.sharingsweden.se/the-sweden-brand/brand-visual-identity/how-to-use-the-identity/",
"title": "How to use the identity",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": ""
},
{
"ID": 445,
"post_author": "4",
"post_date": "2024-10-03 14:29:36",
"post_date_gmt": "2023-06-13 15:12:23",
"post_content": " ",
"post_title": "",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "445",
"to_ping": "",
"pinged": "",
"post_modified": "2024-10-03 14:29:36",
"post_modified_gmt": "2024-10-03 12:29:36",
"post_content_filtered": "",
"post_parent": 257,
"guid": "https://cms.sharingsweden.se/?p=445",
"menu_order": 3,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 445,
"menu_item_parent": "0",
"object_id": "297",
"object": "page",
"type": "post_type",
"type_label": "Page",
"url": "https://cms.sharingsweden.se/the-sweden-brand/brand-visual-identity/design-principles/",
"title": "Design principles",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": ""
},
{
"ID": 443,
"post_author": "4",
"post_date": "2024-10-03 14:29:36",
"post_date_gmt": "2023-06-13 15:12:23",
"post_content": " ",
"post_title": "",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "443",
"to_ping": "",
"pinged": "",
"post_modified": "2024-10-03 14:29:36",
"post_modified_gmt": "2024-10-03 12:29:36",
"post_content_filtered": "",
"post_parent": 257,
"guid": "https://cms.sharingsweden.se/?p=443",
"menu_order": 4,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 443,
"menu_item_parent": "0",
"object_id": "300",
"object": "page",
"type": "post_type",
"type_label": "Page",
"url": "https://cms.sharingsweden.se/the-sweden-brand/brand-visual-identity/brand-marks/",
"title": "Logo and other brand marks",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": ""
},
{
"ID": 444,
"post_author": "4",
"post_date": "2024-10-03 14:29:36",
"post_date_gmt": "2023-06-13 15:12:23",
"post_content": " ",
"post_title": "",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "444",
"to_ping": "",
"pinged": "",
"post_modified": "2024-10-03 14:29:36",
"post_modified_gmt": "2024-10-03 12:29:36",
"post_content_filtered": "",
"post_parent": 257,
"guid": "https://cms.sharingsweden.se/?p=444",
"menu_order": 5,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 444,
"menu_item_parent": "0",
"object_id": "302",
"object": "page",
"type": "post_type",
"type_label": "Page",
"url": "https://cms.sharingsweden.se/the-sweden-brand/brand-visual-identity/colour/",
"title": "Colour",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": ""
},
{
"ID": 440,
"post_author": "4",
"post_date": "2024-10-03 14:29:36",
"post_date_gmt": "2023-06-13 15:12:23",
"post_content": " ",
"post_title": "",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "440",
"to_ping": "",
"pinged": "",
"post_modified": "2024-10-03 14:29:36",
"post_modified_gmt": "2024-10-03 12:29:36",
"post_content_filtered": "",
"post_parent": 257,
"guid": "https://cms.sharingsweden.se/?p=440",
"menu_order": 6,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 440,
"menu_item_parent": "0",
"object_id": "304",
"object": "page",
"type": "post_type",
"type_label": "Page",
"url": "https://cms.sharingsweden.se/the-sweden-brand/brand-visual-identity/accessibility/",
"title": "Accessibility",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": ""
},
{
"ID": 451,
"post_author": "4",
"post_date": "2024-10-03 14:29:36",
"post_date_gmt": "2023-06-13 15:12:23",
"post_content": " ",
"post_title": "",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "451",
"to_ping": "",
"pinged": "",
"post_modified": "2024-10-03 14:29:36",
"post_modified_gmt": "2024-10-03 12:29:36",
"post_content_filtered": "",
"post_parent": 257,
"guid": "https://cms.sharingsweden.se/?p=451",
"menu_order": 7,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 451,
"menu_item_parent": "0",
"object_id": "306",
"object": "page",
"type": "post_type",
"type_label": "Page",
"url": "https://cms.sharingsweden.se/the-sweden-brand/brand-visual-identity/typography/",
"title": "Typography",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": ""
},
{
"ID": 447,
"post_author": "4",
"post_date": "2024-10-03 14:29:36",
"post_date_gmt": "2023-06-13 15:12:23",
"post_content": " ",
"post_title": "",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "447",
"to_ping": "",
"pinged": "",
"post_modified": "2024-10-03 14:29:36",
"post_modified_gmt": "2024-10-03 12:29:36",
"post_content_filtered": "",
"post_parent": 257,
"guid": "https://cms.sharingsweden.se/?p=447",
"menu_order": 8,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 447,
"menu_item_parent": "0",
"object_id": "308",
"object": "page",
"type": "post_type",
"type_label": "Page",
"url": "https://cms.sharingsweden.se/the-sweden-brand/brand-visual-identity/grid/",
"title": "Grid",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": ""
},
{
"ID": 450,
"post_author": "4",
"post_date": "2024-10-03 14:29:36",
"post_date_gmt": "2023-06-13 15:12:23",
"post_content": " ",
"post_title": "",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "450",
"to_ping": "",
"pinged": "",
"post_modified": "2024-10-03 14:29:36",
"post_modified_gmt": "2024-10-03 12:29:36",
"post_content_filtered": "",
"post_parent": 257,
"guid": "https://cms.sharingsweden.se/?p=450",
"menu_order": 9,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 450,
"menu_item_parent": "0",
"object_id": "310",
"object": "page",
"type": "post_type",
"type_label": "Page",
"url": "https://cms.sharingsweden.se/the-sweden-brand/brand-visual-identity/tone-of-motion/",
"title": "Tone of motion",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": ""
},
{
"ID": 449,
"post_author": "4",
"post_date": "2024-10-03 14:29:36",
"post_date_gmt": "2023-06-13 15:12:23",
"post_content": " ",
"post_title": "",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "449",
"to_ping": "",
"pinged": "",
"post_modified": "2024-10-03 14:29:36",
"post_modified_gmt": "2024-10-03 12:29:36",
"post_content_filtered": "",
"post_parent": 257,
"guid": "https://cms.sharingsweden.se/?p=449",
"menu_order": 10,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 449,
"menu_item_parent": "0",
"object_id": "312",
"object": "page",
"type": "post_type",
"type_label": "Page",
"url": "https://cms.sharingsweden.se/the-sweden-brand/brand-visual-identity/illustration/",
"title": "Illustration",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": ""
},
{
"ID": 446,
"post_author": "4",
"post_date": "2024-10-03 14:29:36",
"post_date_gmt": "2023-06-13 15:12:23",
"post_content": " ",
"post_title": "",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "446",
"to_ping": "",
"pinged": "",
"post_modified": "2024-10-03 14:29:36",
"post_modified_gmt": "2024-10-03 12:29:36",
"post_content_filtered": "",
"post_parent": 257,
"guid": "https://cms.sharingsweden.se/?p=446",
"menu_order": 11,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 446,
"menu_item_parent": "0",
"object_id": "314",
"object": "page",
"type": "post_type",
"type_label": "Page",
"url": "https://cms.sharingsweden.se/the-sweden-brand/brand-visual-identity/graphic-element/",
"title": "Graphic element",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": ""
},
{
"ID": 441,
"post_author": "4",
"post_date": "2024-10-03 14:29:36",
"post_date_gmt": "2023-06-13 15:12:23",
"post_content": " ",
"post_title": "",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "441",
"to_ping": "",
"pinged": "",
"post_modified": "2024-10-03 14:29:36",
"post_modified_gmt": "2024-10-03 12:29:36",
"post_content_filtered": "",
"post_parent": 257,
"guid": "https://cms.sharingsweden.se/?p=441",
"menu_order": 12,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 441,
"menu_item_parent": "0",
"object_id": "316",
"object": "page",
"type": "post_type",
"type_label": "Page",
"url": "https://cms.sharingsweden.se/the-sweden-brand/brand-visual-identity/best-practice/",
"title": "Best practice",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": ""
}
]
},
"sidebarMenu": {
"currentUrl": "/the-sweden-brand/brand-visual-identity/accessibility/",
"menuItems": [
{
"id": 25759,
"href": "/the-sweden-brand/brand-visual-identity/",
"title": "Brand visual identity"
},
{
"id": 448,
"href": "/the-sweden-brand/brand-visual-identity/how-to-use-the-identity/",
"title": "How to use the identity"
},
{
"id": 445,
"href": "/the-sweden-brand/brand-visual-identity/design-principles/",
"title": "Design principles"
},
{
"id": 443,
"href": "/the-sweden-brand/brand-visual-identity/brand-marks/",
"title": "Logo and other brand marks"
},
{
"id": 444,
"href": "/the-sweden-brand/brand-visual-identity/colour/",
"title": "Colour"
},
{
"id": 440,
"href": "/the-sweden-brand/brand-visual-identity/accessibility/",
"title": "Accessibility"
},
{
"id": 451,
"href": "/the-sweden-brand/brand-visual-identity/typography/",
"title": "Typography"
},
{
"id": 447,
"href": "/the-sweden-brand/brand-visual-identity/grid/",
"title": "Grid"
},
{
"id": 450,
"href": "/the-sweden-brand/brand-visual-identity/tone-of-motion/",
"title": "Tone of motion"
},
{
"id": 449,
"href": "/the-sweden-brand/brand-visual-identity/illustration/",
"title": "Illustration"
},
{
"id": 446,
"href": "/the-sweden-brand/brand-visual-identity/graphic-element/",
"title": "Graphic element"
},
{
"id": 441,
"href": "/the-sweden-brand/brand-visual-identity/best-practice/",
"title": "Best practice"
}
]
},
"featuredMedia": {
"imageBlockProps": {
"imageProps": {
"src": null,
"alt": "",
"title": "Accessibility",
"caption": null,
"height": 0,
"width": 0
},
"caption": ""
}
},
"rows": [
{
"left": [],
"right": [
{
"type": "preamble",
"anchorId": "",
"children": [
{
"type": "paragraph",
"anchorId": "",
"children": "Accessibility is a vital part of Brand Sweden. The contrast between text and background is essential when creating user-friendly interfaces. The contrast standards are established by the Web Content Accessibility Guidelines (WCAG 2.0)."
}
]
},
{
"type": "paragraph",
"anchorId": "",
"children": "The minimum level of legibility requires a 4.5:1 colour contrast for normal texts, and 3:1 for larger texts. This is equivalent to WCAG Level AA."
},
{
"type": "paragraph",
"anchorId": "",
"children": "This section offers recommendations for the most common combinations of text and background colours, and how to handle text in combination with imagery. Should you need to incorporate new combinations, make sure they meet WCAG 2.0 level AA standards.*"
},
{
"type": "paragraph",
"anchorId": "",
"children": "*There are multiple efficient online tools and apps for contrast checking. We recommend <a href=\"https://axesslab.com/top-color-contrast-checkers/\">this article from Axess Lab</a> for finding a free colour contrast checker."
}
],
"reverseColumnOrderOnMobile": false
},
{
"left": [],
"right": [
{
"type": "section",
"anchorId": null,
"children": [
{
"type": "heading",
"anchorId": "",
"h2": true,
"children": "Colour contrast"
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Text on Sweden Yellow Standard and Sweden Blue Standard background.",
"title": "colourcontrast1",
"alt": "Text on Sweden Yellow Standard and Sweden Blue Standard background.",
"src": "/app/uploads/2023/10/colourcontrast1.png",
"width": 2350,
"height": 1140
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Text on Black and White background.",
"title": "colourcontrast2",
"alt": "Text on Black and White background.",
"src": "/app/uploads/2023/10/colourcontrast2.png",
"width": 2350,
"height": 1140
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Text on Grain Yellow and Pale Yellow background.",
"title": "colourcontrast3",
"alt": "Text on Grain Yellow and Pale Yellow background.",
"src": "/app/uploads/2023/10/colourcontrast3.png",
"width": 2350,
"height": 1400
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Text on Dawn Blue and Dark Dawn Blue background.",
"title": "colourcontrast4",
"alt": "Text on Dawn Blue and Dark Dawn Blue background.",
"src": "/app/uploads/2023/10/colourcontrast4.png",
"width": 2350,
"height": 1400
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Text on Pale Winter Grey 1 and 2 background.",
"title": "colourcontrast5",
"alt": "Text on Pale Winter Grey 1 and 2 background.",
"src": "/app/uploads/2023/10/colourcontrast5.png",
"width": 2350,
"height": 1140
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Text on Winter Grey background.",
"title": "colourcontrast6",
"alt": "Text on Winter Grey background.",
"src": "/app/uploads/2023/10/colourcontrast6.png",
"width": 2350,
"height": 1400
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Text on Dark Winter Grey 1 and 2 background.",
"title": "colourcontrast7",
"alt": "Text on Dark Winter Grey 1 and 2 background.",
"src": "/app/uploads/2023/10/colourcontrast7.png",
"width": 2350,
"height": 1400
}
]
},
{
"type": "section",
"anchorId": null,
"children": [
{
"type": "heading",
"anchorId": "",
"h2": true,
"children": "Text over image"
},
{
"type": "paragraph",
"anchorId": "",
"children": "To make sure accesibility requirements are met, we recommend not to place text directly over imagery, illustrations or complex patterns."
},
{
"type": "paragraph",
"anchorId": "",
"children": "Instead, we recommend placing text over a background of a solid colour."
},
{
"type": "paragraph",
"anchorId": "",
"children": "However, if text must be placed over imagery, we recommend the use of a black layer set to at least 70 per cent opacity between text and image, with typography in white."
},
{
"type": "heading",
"anchorId": "",
"h3": true,
"children": "Dos"
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "✔ Black text over solid White background with image above.",
"title": "Accessibility_textimage1",
"alt": "Black text over solid White background with image above.",
"src": "/app/uploads/2023/08/Accessibility_textimage1.png",
"width": 635,
"height": 660
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "✔ White text over solid Dawn Blue background with image above.",
"title": "Accessibility_textimage2",
"alt": "White text over solid Dawn Blue background with image above.",
"src": "/app/uploads/2023/08/Accessibility_textimage2.png",
"width": 635,
"height": 660
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "✔ Text over image with minimum 70% opacity overlay, only to be used if previous recommended options are not possible.",
"title": "Accessibility_textimage3",
"alt": "Text over image with minimum 70% opacity overlay.",
"src": "/app/uploads/2023/08/Accessibility_textimage3.png",
"width": 492,
"height": 511
},
{
"type": "heading",
"anchorId": "",
"h3": true,
"children": "Don'ts"
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Don't use black text over image without overlay.",
"title": "Accessibility_textimage4",
"alt": "Example of how not to do it: Black text over image without overlay.",
"src": "/app/uploads/2023/08/Accessibility_textimage4.png",
"width": 635,
"height": 660
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Don't use white text over image with overlay under 70% opacity (not enough contrast).",
"title": "Accessibility_textimage5",
"alt": "Example of how not to do it: White text over image with overlay under 70% opacity.",
"src": "/app/uploads/2023/08/Accessibility_textimage5.png",
"width": 635,
"height": 660
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Don't use colour overlay.",
"title": "Accessibility_textimage6",
"alt": "Example of how not to do it: Colour overlay.",
"src": "/app/uploads/2023/08/Accessibility_textimage6.png",
"width": 635,
"height": 660
}
]
}
],
"reverseColumnOrderOnMobile": false
}
],
"blocks": [
{
"left": [],
"right": [
{
"type": "preamble",
"anchorId": "",
"children": [
{
"type": "paragraph",
"anchorId": "",
"children": "Accessibility is a vital part of Brand Sweden. The contrast between text and background is essential when creating user-friendly interfaces. The contrast standards are established by the Web Content Accessibility Guidelines (WCAG 2.0)."
}
]
},
{
"type": "paragraph",
"anchorId": "",
"children": "The minimum level of legibility requires a 4.5:1 colour contrast for normal texts, and 3:1 for larger texts. This is equivalent to WCAG Level AA."
},
{
"type": "paragraph",
"anchorId": "",
"children": "This section offers recommendations for the most common combinations of text and background colours, and how to handle text in combination with imagery. Should you need to incorporate new combinations, make sure they meet WCAG 2.0 level AA standards.*"
},
{
"type": "paragraph",
"anchorId": "",
"children": "*There are multiple efficient online tools and apps for contrast checking. We recommend <a href=\"https://axesslab.com/top-color-contrast-checkers/\">this article from Axess Lab</a> for finding a free colour contrast checker."
}
],
"reverseColumnOrderOnMobile": false
},
{
"left": [],
"right": [
{
"type": "section",
"anchorId": null,
"children": [
{
"type": "heading",
"anchorId": "",
"h2": true,
"children": "Colour contrast"
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Text on Sweden Yellow Standard and Sweden Blue Standard background.",
"title": "colourcontrast1",
"alt": "Text on Sweden Yellow Standard and Sweden Blue Standard background.",
"src": "/app/uploads/2023/10/colourcontrast1.png",
"width": 2350,
"height": 1140
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Text on Black and White background.",
"title": "colourcontrast2",
"alt": "Text on Black and White background.",
"src": "/app/uploads/2023/10/colourcontrast2.png",
"width": 2350,
"height": 1140
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Text on Grain Yellow and Pale Yellow background.",
"title": "colourcontrast3",
"alt": "Text on Grain Yellow and Pale Yellow background.",
"src": "/app/uploads/2023/10/colourcontrast3.png",
"width": 2350,
"height": 1400
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Text on Dawn Blue and Dark Dawn Blue background.",
"title": "colourcontrast4",
"alt": "Text on Dawn Blue and Dark Dawn Blue background.",
"src": "/app/uploads/2023/10/colourcontrast4.png",
"width": 2350,
"height": 1400
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Text on Pale Winter Grey 1 and 2 background.",
"title": "colourcontrast5",
"alt": "Text on Pale Winter Grey 1 and 2 background.",
"src": "/app/uploads/2023/10/colourcontrast5.png",
"width": 2350,
"height": 1140
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Text on Winter Grey background.",
"title": "colourcontrast6",
"alt": "Text on Winter Grey background.",
"src": "/app/uploads/2023/10/colourcontrast6.png",
"width": 2350,
"height": 1400
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Text on Dark Winter Grey 1 and 2 background.",
"title": "colourcontrast7",
"alt": "Text on Dark Winter Grey 1 and 2 background.",
"src": "/app/uploads/2023/10/colourcontrast7.png",
"width": 2350,
"height": 1400
}
]
},
{
"type": "section",
"anchorId": null,
"children": [
{
"type": "heading",
"anchorId": "",
"h2": true,
"children": "Text over image"
},
{
"type": "paragraph",
"anchorId": "",
"children": "To make sure accesibility requirements are met, we recommend not to place text directly over imagery, illustrations or complex patterns."
},
{
"type": "paragraph",
"anchorId": "",
"children": "Instead, we recommend placing text over a background of a solid colour."
},
{
"type": "paragraph",
"anchorId": "",
"children": "However, if text must be placed over imagery, we recommend the use of a black layer set to at least 70 per cent opacity between text and image, with typography in white."
},
{
"type": "heading",
"anchorId": "",
"h3": true,
"children": "Dos"
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "✔ Black text over solid White background with image above.",
"title": "Accessibility_textimage1",
"alt": "Black text over solid White background with image above.",
"src": "/app/uploads/2023/08/Accessibility_textimage1.png",
"width": 635,
"height": 660
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "✔ White text over solid Dawn Blue background with image above.",
"title": "Accessibility_textimage2",
"alt": "White text over solid Dawn Blue background with image above.",
"src": "/app/uploads/2023/08/Accessibility_textimage2.png",
"width": 635,
"height": 660
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "✔ Text over image with minimum 70% opacity overlay, only to be used if previous recommended options are not possible.",
"title": "Accessibility_textimage3",
"alt": "Text over image with minimum 70% opacity overlay.",
"src": "/app/uploads/2023/08/Accessibility_textimage3.png",
"width": 492,
"height": 511
},
{
"type": "heading",
"anchorId": "",
"h3": true,
"children": "Don'ts"
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Don't use black text over image without overlay.",
"title": "Accessibility_textimage4",
"alt": "Example of how not to do it: Black text over image without overlay.",
"src": "/app/uploads/2023/08/Accessibility_textimage4.png",
"width": 635,
"height": 660
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Don't use white text over image with overlay under 70% opacity (not enough contrast).",
"title": "Accessibility_textimage5",
"alt": "Example of how not to do it: White text over image with overlay under 70% opacity.",
"src": "/app/uploads/2023/08/Accessibility_textimage5.png",
"width": 635,
"height": 660
},
{
"type": "image-with-figcaption",
"anchorId": "",
"caption": "Don't use colour overlay.",
"title": "Accessibility_textimage6",
"alt": "Example of how not to do it: Colour overlay.",
"src": "/app/uploads/2023/08/Accessibility_textimage6.png",
"width": 635,
"height": 660
}
]
}
],
"reverseColumnOrderOnMobile": false
}
],
"block_data": [
{
"sweden-tsw/article-row": {
"sweden-tsw/right-column": [
[
{
"blockName": "sharing-sweden-tsw/preamble",
"attrs": [],
"innerBlocks": [
{
"blockName": "core/paragraph",
"attrs": {
"placeholder": "Preamble text...",
"align": "",
"content": "Accessibility is a vital part of Brand Sweden. The contrast between text and background is essential when creating user-friendly interfaces. The contrast standards are established by the Web Content Accessibility Guidelines (WCAG 2.0).",
"dropCap": false,
"direction": "",
"lock": [],
"metadata": [],
"className": "",
"style": [],
"backgroundColor": "",
"textColor": "",
"gradient": "",
"fontSize": "",
"fontFamily": "",
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<p>Accessibility is a vital part of Brand Sweden. The contrast between text and background is essential when creating user-friendly interfaces. The contrast standards are established by the Web Content Accessibility Guidelines (WCAG 2.0).</p>\n",
"innerContent": [
"\n<p>Accessibility is a vital part of Brand Sweden. The contrast between text and background is essential when creating user-friendly interfaces. The contrast standards are established by the Web Content Accessibility Guidelines (WCAG 2.0).</p>\n"
],
"rendered": "\n<p>Accessibility is a vital part of Brand Sweden. The contrast between text and background is essential when creating user-friendly interfaces. The contrast standards are established by the Web Content Accessibility Guidelines (WCAG 2.0).</p>\n"
}
],
"innerHTML": "\n<div class=\"wp-block-sharing-sweden-tsw-preamble preamble\"></div>\n",
"innerContent": [
"\n<div class=\"wp-block-sharing-sweden-tsw-preamble preamble\">",
null,
"</div>\n"
],
"rendered": "\n<div class=\"wp-block-sharing-sweden-tsw-preamble preamble\">\n<p>Accessibility is a vital part of Brand Sweden. The contrast between text and background is essential when creating user-friendly interfaces. The contrast standards are established by the Web Content Accessibility Guidelines (WCAG 2.0).</p>\n</div>\n"
}
]
]
}
},
{
"sweden-tsw/article-row": {
"sweden-tsw/right-column": [
{
"blockName": "sharing-sweden-tsw/section",
"attrs": [],
"innerBlocks": [
{
"blockName": "core/heading",
"attrs": {
"textAlign": "",
"content": "Colour contrast",
"level": 2,
"levelOptions": [],
"placeholder": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"backgroundColor": "",
"textColor": "",
"gradient": "",
"fontSize": "",
"fontFamily": "",
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<h2>Colour contrast</h2>\n",
"innerContent": [
"\n<h2>Colour contrast</h2>\n"
],
"rendered": "\n<h2 class=\"wp-block-heading\">Colour contrast</h2>\n"
},
{
"blockName": "core/image",
"attrs": {
"id": 4943,
"sizeSlug": "full",
"linkDestination": "none",
"blob": "",
"url": "http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast1.png",
"alt": "Text on Sweden Yellow Standard and Sweden Blue Standard background.",
"caption": "Text on Sweden Yellow Standard and Sweden Blue Standard background.",
"lightbox": [],
"title": "",
"href": "",
"rel": "",
"linkClass": "",
"width": "",
"height": "",
"aspectRatio": "",
"scale": "",
"linkTarget": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast1.png\" alt=\"Text on Sweden Yellow Standard and Sweden Blue Standard background.\" class=\"wp-image-4943\"/><figcaption class=\"wp-element-caption\">Text on Sweden Yellow Standard and Sweden Blue Standard background.</figcaption></figure>\n",
"innerContent": [
"\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast1.png\" alt=\"Text on Sweden Yellow Standard and Sweden Blue Standard background.\" class=\"wp-image-4943\"/><figcaption class=\"wp-element-caption\">Text on Sweden Yellow Standard and Sweden Blue Standard background.</figcaption></figure>\n"
],
"rendered": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast1.png\" alt=\"Text on Sweden Yellow Standard and Sweden Blue Standard background.\" class=\"wp-image-4943\"/><figcaption class=\"wp-element-caption\">Text on Sweden Yellow Standard and Sweden Blue Standard background.</figcaption></figure>\n"
},
{
"blockName": "core/image",
"attrs": {
"id": 4946,
"sizeSlug": "full",
"linkDestination": "none",
"blob": "",
"url": "http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast2.png",
"alt": "Text on Black and White background.",
"caption": "Text on Black and White background.",
"lightbox": [],
"title": "",
"href": "",
"rel": "",
"linkClass": "",
"width": "",
"height": "",
"aspectRatio": "",
"scale": "",
"linkTarget": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast2.png\" alt=\"Text on Black and White background.\" class=\"wp-image-4946\"/><figcaption class=\"wp-element-caption\">Text on Black and White background.</figcaption></figure>\n",
"innerContent": [
"\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast2.png\" alt=\"Text on Black and White background.\" class=\"wp-image-4946\"/><figcaption class=\"wp-element-caption\">Text on Black and White background.</figcaption></figure>\n"
],
"rendered": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast2.png\" alt=\"Text on Black and White background.\" class=\"wp-image-4946\"/><figcaption class=\"wp-element-caption\">Text on Black and White background.</figcaption></figure>\n"
},
{
"blockName": "core/image",
"attrs": {
"id": 4948,
"sizeSlug": "full",
"linkDestination": "none",
"blob": "",
"url": "http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast3.png",
"alt": "Text on Grain Yellow and Pale Yellow background.",
"caption": "Text on Grain Yellow and Pale Yellow background.",
"lightbox": [],
"title": "",
"href": "",
"rel": "",
"linkClass": "",
"width": "",
"height": "",
"aspectRatio": "",
"scale": "",
"linkTarget": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast3.png\" alt=\"Text on Grain Yellow and Pale Yellow background.\" class=\"wp-image-4948\"/><figcaption class=\"wp-element-caption\">Text on Grain Yellow and Pale Yellow background.</figcaption></figure>\n",
"innerContent": [
"\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast3.png\" alt=\"Text on Grain Yellow and Pale Yellow background.\" class=\"wp-image-4948\"/><figcaption class=\"wp-element-caption\">Text on Grain Yellow and Pale Yellow background.</figcaption></figure>\n"
],
"rendered": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast3.png\" alt=\"Text on Grain Yellow and Pale Yellow background.\" class=\"wp-image-4948\"/><figcaption class=\"wp-element-caption\">Text on Grain Yellow and Pale Yellow background.</figcaption></figure>\n"
},
{
"blockName": "core/image",
"attrs": {
"id": 4949,
"sizeSlug": "full",
"linkDestination": "none",
"blob": "",
"url": "http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast4.png",
"alt": "Text on Dawn Blue and Dark Dawn Blue background.",
"caption": "Text on Dawn Blue and Dark Dawn Blue background.",
"lightbox": [],
"title": "",
"href": "",
"rel": "",
"linkClass": "",
"width": "",
"height": "",
"aspectRatio": "",
"scale": "",
"linkTarget": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast4.png\" alt=\"Text on Dawn Blue and Dark Dawn Blue background.\" class=\"wp-image-4949\"/><figcaption class=\"wp-element-caption\">Text on Dawn Blue and Dark Dawn Blue background.</figcaption></figure>\n",
"innerContent": [
"\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast4.png\" alt=\"Text on Dawn Blue and Dark Dawn Blue background.\" class=\"wp-image-4949\"/><figcaption class=\"wp-element-caption\">Text on Dawn Blue and Dark Dawn Blue background.</figcaption></figure>\n"
],
"rendered": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast4.png\" alt=\"Text on Dawn Blue and Dark Dawn Blue background.\" class=\"wp-image-4949\"/><figcaption class=\"wp-element-caption\">Text on Dawn Blue and Dark Dawn Blue background.</figcaption></figure>\n"
},
{
"blockName": "core/image",
"attrs": {
"id": 4951,
"sizeSlug": "full",
"linkDestination": "none",
"blob": "",
"url": "http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast5.png",
"alt": "Text on Pale Winter Grey 1 and 2 background.",
"caption": "Text on Pale Winter Grey 1 and 2 background.",
"lightbox": [],
"title": "",
"href": "",
"rel": "",
"linkClass": "",
"width": "",
"height": "",
"aspectRatio": "",
"scale": "",
"linkTarget": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast5.png\" alt=\"Text on Pale Winter Grey 1 and 2 background.\" class=\"wp-image-4951\"/><figcaption class=\"wp-element-caption\">Text on Pale Winter Grey 1 and 2 background.</figcaption></figure>\n",
"innerContent": [
"\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast5.png\" alt=\"Text on Pale Winter Grey 1 and 2 background.\" class=\"wp-image-4951\"/><figcaption class=\"wp-element-caption\">Text on Pale Winter Grey 1 and 2 background.</figcaption></figure>\n"
],
"rendered": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast5.png\" alt=\"Text on Pale Winter Grey 1 and 2 background.\" class=\"wp-image-4951\"/><figcaption class=\"wp-element-caption\">Text on Pale Winter Grey 1 and 2 background.</figcaption></figure>\n"
},
{
"blockName": "core/image",
"attrs": {
"id": 4952,
"sizeSlug": "full",
"linkDestination": "none",
"blob": "",
"url": "http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast6.png",
"alt": "Text on Winter Grey background.",
"caption": "Text on Winter Grey background.",
"lightbox": [],
"title": "",
"href": "",
"rel": "",
"linkClass": "",
"width": "",
"height": "",
"aspectRatio": "",
"scale": "",
"linkTarget": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast6.png\" alt=\"Text on Winter Grey background.\" class=\"wp-image-4952\"/><figcaption class=\"wp-element-caption\">Text on Winter Grey background.</figcaption></figure>\n",
"innerContent": [
"\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast6.png\" alt=\"Text on Winter Grey background.\" class=\"wp-image-4952\"/><figcaption class=\"wp-element-caption\">Text on Winter Grey background.</figcaption></figure>\n"
],
"rendered": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast6.png\" alt=\"Text on Winter Grey background.\" class=\"wp-image-4952\"/><figcaption class=\"wp-element-caption\">Text on Winter Grey background.</figcaption></figure>\n"
},
{
"blockName": "core/image",
"attrs": {
"id": 4954,
"sizeSlug": "full",
"linkDestination": "none",
"blob": "",
"url": "http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast7.png",
"alt": "Text on Dark Winter Grey 1 and 2 background.",
"caption": "Text on Dark Winter Grey 1 and 2 background.",
"lightbox": [],
"title": "",
"href": "",
"rel": "",
"linkClass": "",
"width": "",
"height": "",
"aspectRatio": "",
"scale": "",
"linkTarget": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast7.png\" alt=\"Text on Dark Winter Grey 1 and 2 background.\" class=\"wp-image-4954\"/><figcaption class=\"wp-element-caption\">Text on Dark Winter Grey 1 and 2 background.</figcaption></figure>\n",
"innerContent": [
"\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast7.png\" alt=\"Text on Dark Winter Grey 1 and 2 background.\" class=\"wp-image-4954\"/><figcaption class=\"wp-element-caption\">Text on Dark Winter Grey 1 and 2 background.</figcaption></figure>\n"
],
"rendered": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast7.png\" alt=\"Text on Dark Winter Grey 1 and 2 background.\" class=\"wp-image-4954\"/><figcaption class=\"wp-element-caption\">Text on Dark Winter Grey 1 and 2 background.</figcaption></figure>\n"
}
],
"innerHTML": "\n<div class=\"wp-block-sharing-sweden-tsw-section section\">\n\n\n\n\n\n\n\n\n\n\n\n\n\n</div>\n",
"innerContent": [
"\n<div class=\"wp-block-sharing-sweden-tsw-section section\">",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"</div>\n"
],
"rendered": "\n<div class=\"wp-block-sharing-sweden-tsw-section section\">\n<h2 class=\"wp-block-heading\">Colour contrast</h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast1.png\" alt=\"Text on Sweden Yellow Standard and Sweden Blue Standard background.\" class=\"wp-image-4943\"/><figcaption class=\"wp-element-caption\">Text on Sweden Yellow Standard and Sweden Blue Standard background.</figcaption></figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast2.png\" alt=\"Text on Black and White background.\" class=\"wp-image-4946\"/><figcaption class=\"wp-element-caption\">Text on Black and White background.</figcaption></figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast3.png\" alt=\"Text on Grain Yellow and Pale Yellow background.\" class=\"wp-image-4948\"/><figcaption class=\"wp-element-caption\">Text on Grain Yellow and Pale Yellow background.</figcaption></figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast4.png\" alt=\"Text on Dawn Blue and Dark Dawn Blue background.\" class=\"wp-image-4949\"/><figcaption class=\"wp-element-caption\">Text on Dawn Blue and Dark Dawn Blue background.</figcaption></figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast5.png\" alt=\"Text on Pale Winter Grey 1 and 2 background.\" class=\"wp-image-4951\"/><figcaption class=\"wp-element-caption\">Text on Pale Winter Grey 1 and 2 background.</figcaption></figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast6.png\" alt=\"Text on Winter Grey background.\" class=\"wp-image-4952\"/><figcaption class=\"wp-element-caption\">Text on Winter Grey background.</figcaption></figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/10/colourcontrast7.png\" alt=\"Text on Dark Winter Grey 1 and 2 background.\" class=\"wp-image-4954\"/><figcaption class=\"wp-element-caption\">Text on Dark Winter Grey 1 and 2 background.</figcaption></figure>\n</div>\n"
},
{
"blockName": "sharing-sweden-tsw/section",
"attrs": [],
"innerBlocks": [
{
"blockName": "core/heading",
"attrs": {
"textAlign": "",
"content": "Text over image",
"level": 2,
"levelOptions": [],
"placeholder": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"backgroundColor": "",
"textColor": "",
"gradient": "",
"fontSize": "",
"fontFamily": "",
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<h2>Text over image</h2>\n",
"innerContent": [
"\n<h2>Text over image</h2>\n"
],
"rendered": "\n<h2 class=\"wp-block-heading\">Text over image</h2>\n"
},
{
"blockName": "core/paragraph",
"attrs": {
"align": "",
"content": "To make sure accesibility requirements are met, we recommend not to place text directly over imagery, illustrations or complex patterns.",
"dropCap": false,
"placeholder": "",
"direction": "",
"lock": [],
"metadata": [],
"className": "",
"style": [],
"backgroundColor": "",
"textColor": "",
"gradient": "",
"fontSize": "",
"fontFamily": "",
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<p>To make sure accesibility requirements are met, we recommend not to place text directly over imagery, illustrations or complex patterns.</p>\n",
"innerContent": [
"\n<p>To make sure accesibility requirements are met, we recommend not to place text directly over imagery, illustrations or complex patterns.</p>\n"
],
"rendered": "\n<p>To make sure accesibility requirements are met, we recommend not to place text directly over imagery, illustrations or complex patterns.</p>\n"
},
{
"blockName": "core/paragraph",
"attrs": {
"align": "",
"content": "Instead, we recommend placing text over a background of a solid colour.",
"dropCap": false,
"placeholder": "",
"direction": "",
"lock": [],
"metadata": [],
"className": "",
"style": [],
"backgroundColor": "",
"textColor": "",
"gradient": "",
"fontSize": "",
"fontFamily": "",
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<p>Instead, we recommend placing text over a background of a solid colour.</p>\n",
"innerContent": [
"\n<p>Instead, we recommend placing text over a background of a solid colour.</p>\n"
],
"rendered": "\n<p>Instead, we recommend placing text over a background of a solid colour.</p>\n"
},
{
"blockName": "core/paragraph",
"attrs": {
"align": "",
"content": "However, if text must be placed over imagery, we recommend the use of a black layer set to at least 70 per cent opacity between text and image, with typography in white.",
"dropCap": false,
"placeholder": "",
"direction": "",
"lock": [],
"metadata": [],
"className": "",
"style": [],
"backgroundColor": "",
"textColor": "",
"gradient": "",
"fontSize": "",
"fontFamily": "",
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<p>However, if text must be placed over imagery, we recommend the use of a black layer set to at least 70 per cent opacity between text and image, with typography in white.</p>\n",
"innerContent": [
"\n<p>However, if text must be placed over imagery, we recommend the use of a black layer set to at least 70 per cent opacity between text and image, with typography in white.</p>\n"
],
"rendered": "\n<p>However, if text must be placed over imagery, we recommend the use of a black layer set to at least 70 per cent opacity between text and image, with typography in white.</p>\n"
},
{
"blockName": "core/heading",
"attrs": {
"level": 3,
"textAlign": "",
"content": "Dos",
"levelOptions": [],
"placeholder": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"backgroundColor": "",
"textColor": "",
"gradient": "",
"fontSize": "",
"fontFamily": "",
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<h3>Dos</h3>\n",
"innerContent": [
"\n<h3>Dos</h3>\n"
],
"rendered": "\n<h3 class=\"wp-block-heading\">Dos</h3>\n"
},
{
"blockName": "core/image",
"attrs": {
"id": 2083,
"sizeSlug": "full",
"linkDestination": "none",
"blob": "",
"url": "http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage1.png",
"alt": "Black text over solid White background with image above.",
"caption": "✔ Black text over solid White background with image above.",
"lightbox": [],
"title": "",
"href": "",
"rel": "",
"linkClass": "",
"width": "",
"height": "",
"aspectRatio": "",
"scale": "",
"linkTarget": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage1.png\" alt=\"Black text over solid White background with image above.\" class=\"wp-image-2083\"/><figcaption class=\"wp-element-caption\">✔ Black text over solid White background with image above.</figcaption></figure>\n",
"innerContent": [
"\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage1.png\" alt=\"Black text over solid White background with image above.\" class=\"wp-image-2083\"/><figcaption class=\"wp-element-caption\">✔ Black text over solid White background with image above.</figcaption></figure>\n"
],
"rendered": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage1.png\" alt=\"Black text over solid White background with image above.\" class=\"wp-image-2083\"/><figcaption class=\"wp-element-caption\">✔ Black text over solid White background with image above.</figcaption></figure>\n"
},
{
"blockName": "core/image",
"attrs": {
"id": 2084,
"sizeSlug": "full",
"linkDestination": "none",
"blob": "",
"url": "http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage2.png",
"alt": "White text over solid Dawn Blue background with image above.",
"caption": "✔ White text over solid Dawn Blue background with image above.",
"lightbox": [],
"title": "",
"href": "",
"rel": "",
"linkClass": "",
"width": "",
"height": "",
"aspectRatio": "",
"scale": "",
"linkTarget": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage2.png\" alt=\"White text over solid Dawn Blue background with image above.\" class=\"wp-image-2084\"/><figcaption class=\"wp-element-caption\">✔ White text over solid Dawn Blue background with image above.</figcaption></figure>\n",
"innerContent": [
"\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage2.png\" alt=\"White text over solid Dawn Blue background with image above.\" class=\"wp-image-2084\"/><figcaption class=\"wp-element-caption\">✔ White text over solid Dawn Blue background with image above.</figcaption></figure>\n"
],
"rendered": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage2.png\" alt=\"White text over solid Dawn Blue background with image above.\" class=\"wp-image-2084\"/><figcaption class=\"wp-element-caption\">✔ White text over solid Dawn Blue background with image above.</figcaption></figure>\n"
},
{
"blockName": "core/image",
"attrs": {
"id": 2085,
"sizeSlug": "full",
"linkDestination": "none",
"blob": "",
"url": "http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage3.png",
"alt": "Text over image with minimum 70% opacity overlay.",
"caption": "✔ Text over image with minimum 70% opacity overlay, only to be used if previous recommended options are not possible.",
"lightbox": [],
"title": "",
"href": "",
"rel": "",
"linkClass": "",
"width": "",
"height": "",
"aspectRatio": "",
"scale": "",
"linkTarget": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage3.png\" alt=\"Text over image with minimum 70% opacity overlay.\" class=\"wp-image-2085\"/><figcaption class=\"wp-element-caption\">✔ Text over image with minimum 70% opacity overlay, only to be used if previous recommended options are not possible.</figcaption></figure>\n",
"innerContent": [
"\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage3.png\" alt=\"Text over image with minimum 70% opacity overlay.\" class=\"wp-image-2085\"/><figcaption class=\"wp-element-caption\">✔ Text over image with minimum 70% opacity overlay, only to be used if previous recommended options are not possible.</figcaption></figure>\n"
],
"rendered": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage3.png\" alt=\"Text over image with minimum 70% opacity overlay.\" class=\"wp-image-2085\"/><figcaption class=\"wp-element-caption\">✔ Text over image with minimum 70% opacity overlay, only to be used if previous recommended options are not possible.</figcaption></figure>\n"
},
{
"blockName": "core/heading",
"attrs": {
"level": 3,
"textAlign": "",
"content": "Don'ts",
"levelOptions": [],
"placeholder": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"backgroundColor": "",
"textColor": "",
"gradient": "",
"fontSize": "",
"fontFamily": "",
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<h3>Don'ts</h3>\n",
"innerContent": [
"\n<h3>Don'ts</h3>\n"
],
"rendered": "\n<h3 class=\"wp-block-heading\">Don'ts</h3>\n"
},
{
"blockName": "core/image",
"attrs": {
"id": 2086,
"sizeSlug": "full",
"linkDestination": "none",
"blob": "",
"url": "http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage4.png",
"alt": "Example of how not to do it: Black text over image without overlay.",
"caption": "Don't use black text over image without overlay.",
"lightbox": [],
"title": "",
"href": "",
"rel": "",
"linkClass": "",
"width": "",
"height": "",
"aspectRatio": "",
"scale": "",
"linkTarget": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage4.png\" alt=\"Example of how not to do it: Black text over image without overlay.\" class=\"wp-image-2086\"/><figcaption class=\"wp-element-caption\">Don't use black text over image without overlay.</figcaption></figure>\n",
"innerContent": [
"\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage4.png\" alt=\"Example of how not to do it: Black text over image without overlay.\" class=\"wp-image-2086\"/><figcaption class=\"wp-element-caption\">Don't use black text over image without overlay.</figcaption></figure>\n"
],
"rendered": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage4.png\" alt=\"Example of how not to do it: Black text over image without overlay.\" class=\"wp-image-2086\"/><figcaption class=\"wp-element-caption\">Don't use black text over image without overlay.</figcaption></figure>\n"
},
{
"blockName": "core/image",
"attrs": {
"id": 2087,
"sizeSlug": "full",
"linkDestination": "none",
"blob": "",
"url": "http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage5.png",
"alt": "Example of how not to do it: White text over image with overlay under 70% opacity.",
"caption": "Don't use white text over image with overlay under 70% opacity (not enough contrast).",
"lightbox": [],
"title": "",
"href": "",
"rel": "",
"linkClass": "",
"width": "",
"height": "",
"aspectRatio": "",
"scale": "",
"linkTarget": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage5.png\" alt=\"Example of how not to do it: White text over image with overlay under 70% opacity.\" class=\"wp-image-2087\"/><figcaption class=\"wp-element-caption\">Don't use white text over image with overlay under 70% opacity (not enough contrast).</figcaption></figure>\n",
"innerContent": [
"\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage5.png\" alt=\"Example of how not to do it: White text over image with overlay under 70% opacity.\" class=\"wp-image-2087\"/><figcaption class=\"wp-element-caption\">Don't use white text over image with overlay under 70% opacity (not enough contrast).</figcaption></figure>\n"
],
"rendered": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage5.png\" alt=\"Example of how not to do it: White text over image with overlay under 70% opacity.\" class=\"wp-image-2087\"/><figcaption class=\"wp-element-caption\">Don't use white text over image with overlay under 70% opacity (not enough contrast).</figcaption></figure>\n"
},
{
"blockName": "core/image",
"attrs": {
"id": 2088,
"sizeSlug": "full",
"linkDestination": "none",
"blob": "",
"url": "http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage6.png",
"alt": "Example of how not to do it: Colour overlay.",
"caption": "Don't use colour overlay.",
"lightbox": [],
"title": "",
"href": "",
"rel": "",
"linkClass": "",
"width": "",
"height": "",
"aspectRatio": "",
"scale": "",
"linkTarget": "",
"lock": [],
"metadata": [],
"align": "",
"className": "",
"style": [],
"borderColor": "",
"anchor": ""
},
"innerBlocks": [],
"innerHTML": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage6.png\" alt=\"Example of how not to do it: Colour overlay.\" class=\"wp-image-2088\"/><figcaption class=\"wp-element-caption\">Don't use colour overlay.</figcaption></figure>\n",
"innerContent": [
"\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage6.png\" alt=\"Example of how not to do it: Colour overlay.\" class=\"wp-image-2088\"/><figcaption class=\"wp-element-caption\">Don't use colour overlay.</figcaption></figure>\n"
],
"rendered": "\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage6.png\" alt=\"Example of how not to do it: Colour overlay.\" class=\"wp-image-2088\"/><figcaption class=\"wp-element-caption\">Don't use colour overlay.</figcaption></figure>\n"
}
],
"innerHTML": "\n<div class=\"wp-block-sharing-sweden-tsw-section section\">\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n</div>\n",
"innerContent": [
"\n<div class=\"wp-block-sharing-sweden-tsw-section section\">",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"\n\n",
null,
"</div>\n"
],
"rendered": "\n<div class=\"wp-block-sharing-sweden-tsw-section section\">\n<h2 class=\"wp-block-heading\">Text over image</h2>\n\n\n\n<p>To make sure accesibility requirements are met, we recommend not to place text directly over imagery, illustrations or complex patterns.</p>\n\n\n\n<p>Instead, we recommend placing text over a background of a solid colour.</p>\n\n\n\n<p>However, if text must be placed over imagery, we recommend the use of a black layer set to at least 70 per cent opacity between text and image, with typography in white.</p>\n\n\n\n<h3 class=\"wp-block-heading\">Dos</h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage1.png\" alt=\"Black text over solid White background with image above.\" class=\"wp-image-2083\"/><figcaption class=\"wp-element-caption\">✔ Black text over solid White background with image above.</figcaption></figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage2.png\" alt=\"White text over solid Dawn Blue background with image above.\" class=\"wp-image-2084\"/><figcaption class=\"wp-element-caption\">✔ White text over solid Dawn Blue background with image above.</figcaption></figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage3.png\" alt=\"Text over image with minimum 70% opacity overlay.\" class=\"wp-image-2085\"/><figcaption class=\"wp-element-caption\">✔ Text over image with minimum 70% opacity overlay, only to be used if previous recommended options are not possible.</figcaption></figure>\n\n\n\n<h3 class=\"wp-block-heading\">Don'ts</h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage4.png\" alt=\"Example of how not to do it: Black text over image without overlay.\" class=\"wp-image-2086\"/><figcaption class=\"wp-element-caption\">Don't use black text over image without overlay.</figcaption></figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage5.png\" alt=\"Example of how not to do it: White text over image with overlay under 70% opacity.\" class=\"wp-image-2087\"/><figcaption class=\"wp-element-caption\">Don't use white text over image with overlay under 70% opacity (not enough contrast).</figcaption></figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img src=\"http://cms.sharingsweden.se/app/uploads/2023/08/Accessibility_textimage6.png\" alt=\"Example of how not to do it: Colour overlay.\" class=\"wp-image-2088\"/><figcaption class=\"wp-element-caption\">Don't use colour overlay.</figcaption></figure>\n</div>\n"
}
]
}
}
],
"breadcrumbs": [
{
"title": "Start",
"href": "https://cms.sharingsweden.se/",
"isCurrentPage": false
},
{
"title": "The Sweden brand",
"href": "https://cms.sharingsweden.se/the-sweden-brand/",
"isCurrentPage": false
},
{
"title": "Brand visual identity",
"href": "https://cms.sharingsweden.se/the-sweden-brand/brand-visual-identity/",
"isCurrentPage": false
},
{
"title": "Accessibility",
"href": "https://cms.sharingsweden.se/the-sweden-brand/brand-visual-identity/accessibility/",
"isCurrentPage": true
}
]
},
"searchFilters": {
"sort": {
"name": "Sort by",
"options": [
{
"slug": "relevance",
"name": "Relevance"
},
{
"slug": "date",
"name": "Latest"
},
{
"slug": "title",
"name": "a-z"
}
]
},
"language": {
"name": "Languages",
"terms": [
{
"id": 47,
"name": "Albanian",
"slug": "albanian"
},
{
"id": 9,
"name": "Arabic",
"slug": "arabic"
},
{
"id": 48,
"name": "Armenian",
"slug": "armenian"
},
{
"id": 56,
"name": "Bosnian",
"slug": "bosnian"
},
{
"id": 34,
"name": "Chinese",
"slug": "chinese"
},
{
"id": 49,
"name": "Croatian",
"slug": "croatian"
},
{
"id": 60,
"name": "Cypriot Greek",
"slug": "cypriot-greek"
},
{
"id": 7,
"name": "English",
"slug": "english"
},
{
"id": 59,
"name": "Estonian",
"slug": "estonian"
},
{
"id": 61,
"name": "Filipino",
"slug": "filipino"
},
{
"id": 38,
"name": "French",
"slug": "french"
},
{
"id": 62,
"name": "Georgian",
"slug": "georgian"
},
{
"id": 37,
"name": "German",
"slug": "german"
},
{
"id": 64,
"name": "Italian",
"slug": "italian"
},
{
"id": 32,
"name": "Korean",
"slug": "korean"
},
{
"id": 50,
"name": "Latvian",
"slug": "latvian"
},
{
"id": 58,
"name": "Lithuanian",
"slug": "lithuanian"
},
{
"id": 55,
"name": "Macedonian",
"slug": "macedonian"
},
{
"id": 57,
"name": "Polish",
"slug": "polish"
},
{
"id": 53,
"name": "Portuguese",
"slug": "portuguese"
},
{
"id": 75,
"name": "Romanian",
"slug": "romanian"
},
{
"id": 10,
"name": "Russian",
"slug": "russian"
},
{
"id": 76,
"name": "Serbian",
"slug": "serbian"
},
{
"id": 74,
"name": "Slovak",
"slug": "slovak"
},
{
"id": 51,
"name": "Slovenian",
"slug": "slovenian"
},
{
"id": 35,
"name": "Spanish",
"slug": "spanish"
},
{
"id": 43,
"name": "Swedish",
"slug": "swedish"
},
{
"id": 63,
"name": "Thai",
"slug": "thai"
},
{
"id": 52,
"name": "Turkish",
"slug": "turkish"
},
{
"id": 65,
"name": "Vietnamese",
"slug": "vietnamese"
}
]
},
"material_format": {
"name": "Formats",
"terms": [
{
"id": 44,
"name": "Exhibitions",
"slug": "exhibitions"
},
{
"id": 30,
"name": "Feature film",
"slug": "feature-film"
},
{
"id": 66,
"name": "Manuals",
"slug": "manuals"
},
{
"id": 28,
"name": "Presentations",
"slug": "presentations"
},
{
"id": 25,
"name": "Print materials",
"slug": "print-materials"
},
{
"id": 54,
"name": "Quizzes",
"slug": "quiz"
},
{
"id": 6,
"name": "Social media content",
"slug": "social-media"
},
{
"id": 40,
"name": "Templates",
"slug": "templates"
},
{
"id": 77,
"name": "Toolkit",
"slug": "toolkit"
},
{
"id": 29,
"name": "Video",
"slug": "video"
}
]
},
"material_topic": {
"name": "Topics",
"terms": [
{
"id": 70,
"name": "Architecture",
"slug": "architecture"
},
{
"id": 72,
"name": "Art",
"slug": "art"
},
{
"id": 11,
"name": "Celebrations",
"slug": "celebrations"
},
{
"id": 24,
"name": "Children & youth",
"slug": "children-youth"
},
{
"id": 17,
"name": "Democracy",
"slug": "democracy"
},
{
"id": 69,
"name": "Design",
"slug": "design"
},
{
"id": 71,
"name": "Film & drama",
"slug": "film-drama-series"
},
{
"id": 14,
"name": "Food",
"slug": "food"
},
{
"id": 18,
"name": "Gender equality",
"slug": "equality"
},
{
"id": 12,
"name": "History",
"slug": "history"
},
{
"id": 19,
"name": "Innovation",
"slug": "innovation"
},
{
"id": 41,
"name": "LGBTQI+",
"slug": "lgbtqi"
},
{
"id": 67,
"name": "Literature",
"slug": "literature"
},
{
"id": 68,
"name": "Music",
"slug": "music"
},
{
"id": 20,
"name": "Society",
"slug": "society"
},
{
"id": 46,
"name": "Sports",
"slug": "sports"
},
{
"id": 15,
"name": "Study",
"slug": "study"
},
{
"id": 21,
"name": "Sustainability",
"slug": "sustainability"
},
{
"id": 31,
"name": "Sweden in general",
"slug": "sweden-in-general"
},
{
"id": 5,
"name": "Trade",
"slug": "trade"
},
{
"id": 73,
"name": "Work",
"slug": "work"
}
]
}
},
"category": false
}
} 
